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

【问题标题】：Events not binding for serve side rendered component事件未绑定到服务器端呈现的组件
【发布时间】：2017-11-09 08:33:41
【问题描述】：

我正在使用 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 来将脚本添加到主体。没用

【问题讨论】：

标签： javascript asp.net reactjs asp.net-core reactjs.net

【解决方案1】：

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

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

【讨论】：

我没有直接在任何地方设置状态
我猜您最初会将“渲染”状态设置为 false。因此，在初始加载期间，它将调用进行 fetch 调用的“fetchComp”方法。您使用数据在那里设置状态并使“渲染”状态为真。这个 setState 是直接从 render 完成的。这将导致无限循环。检查控制台:-)
是的。但这不是问题。它正确呈现。但渲染后，渲染组件中的点击事件不会触发。

【解决方案2】：

所以发现了问题。仅渲染 javascript 代码不会附加事件。您需要为要附加的事件执行代码。从您的 javascript 字符串中删除标签，然后使用 eval 函数。

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

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

【讨论】：