События не являются обязательными для компонента, отображаемого на стороне обслуживания

Question

Я использую actjs.net для рендеринга компонентов на стороне сервера. Моя проблема в том, что меня попросили получить строки HTML для компонента и соответствующего javascript с помощью вызова ajax и визуализировать компонент.

Это мой метод, который дает строку HTML.

  public JsonResult GetComponent(string strComponentName)
  {
        string strHtml = "";
        IHtmlContent htmlc= HtmlHelperExtensions.React(null, String.Format("Components.{0}", strComponentName), new { });
        strHtml = GetString(htmlc);
       IHtmlContent jscript  = HtmlHelperExtensions.ReactInitJavaScript(null);
        string strJavascript = GetString(jscript);
        jsonresponse jr = new jsonresponse();
        jr.html = strHtml;
        jr.javascript = strJavascript;
        return Json(jr);
 }

Теперь эта функция вызывается по событию нажатия нескольких кнопок. После того, как полученные строки оказываются.

 fetchComp() {
     let FETCH_URL: string = "/Home/GetComponent?strComponentName=" + this.props.componentName;
     fetch(FETCH_URL, {
         method: 'GET'
     })
         .then(response => response.json())
         .then(json => {
             console.log("json from wrapper", json);
             const html = json.html;
             const javascript = json.javascript;
             this.setState({ html: html, javascript: javascript,rendered: true });
             console.log("state val", this.state);


         });
}

метод рендеринга заключается в следующем

 render() {
     if (!this.state.rendered) {
         this.fetchComp();
     }
return (<div>
    <div dangerouslySetInnerHTML={{ __html: this.state.html+" <script src=\"~/dist/client.bundle.js\"></script>" +this.state.javascript }} />


</div>);
}

События для визуализированного компонента не работают. даже если необходимые для javascript события были представлены вместе с компонентом.

Редактировать: я также попытался добавить скрипт в основную часть, создав элемент скрипта и добавив document.body. не работал

Answer 1

Так разобрался с проблемой. Просто рендеринг кода JavaScript не будет прикреплять события. вам нужно выполнить код для прикрепления событий. Удалите теги из строки javascript, затем используйте функцию eval.

  eval(this.state.javascript.replace('<script>','').replace('</script>',''));

Отказ от ответственности: Eval, как известно, вызывает проблемы. хотя я не встречал никого.

Answer 2

render() { if (!this.state.rendered) { this.fetchComp(); }

В этой части вы вызываете функцию fetchComp, которая имеет метод setState. Вы не должны напрямую устанавливать состояние без привязки через события. Это создаст бесконечный цикл и заставит ваше приложение вести себя странно