事件未绑定到服务器端呈现的组件

Question

我正在使用 reactjs.net 渲染组件服务器端。我的问题是，我被要求通过 ajax 调用获取组件和相应 javascript 的 HTML 字符串并呈现组件。

这是我给出 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

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

在这部分中，您将调用具有 setState 方法的 fetchComp 函数。你不应该在没有通过事件绑定的情况下直接设置状态。这将创建一个无限循环并使您的应用程序表现怪异

Answer 2

所以想通了问题。仅呈现 javascript 代码不会附加事件。您需要为事件执行的代码是 javascript 字符串中的 attached.Remove 标记，然后使用 eval 函数。

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

免责声明：已知 eval 会导致问题。虽然我没遇到过。

事件未绑定到服务器端呈现的组件

Events not binding for serve side rendered component

javascript

asp.net

reactjs

reactjs.net

asp.net-core