0

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

4

2 回答 2

0

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

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

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

于 2017-11-16T09:41:24.217 回答
0

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

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

于 2017-11-09T08:45:46.523 回答