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字符串中移除标记，然后使用eval函数。

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

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

未对服务端呈现的组件

2 个答案: