Ereignisse nicht bindend für serve Seite gerendert Komponente

Question

Ich benutze reactjs.net, um Komponenten Serverseite zu rendern. Mein Problem ist, ich wurde gebeten, die HTML-Zeichenfolgen für die Komponente und das entsprechende Javascript über einen Ajax-Aufruf zu erhalten und die Komponente zu rendern.

Dies ist meine Methode, die den HTML-String gibt.

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); 
} 

Nun wird diese Funktion beim Klickereignis einiger Schaltflächen aufgerufen. Nachdem die empfangenen Zeichenfolgen gerendert wurden.

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); 


     }); 
} 

die Render-Methode ist als

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>); 
} 

die Ereignisse für die gerenderte Komponente funktionieren nicht folgt. obwohl die javascript-erforderlichen Ereignisse zusammen mit der Komponente gerendert wurden.

Edit: Ich habe auch versucht, das Skript zum Hauptteil hinzufügen, indem Sie ein Skriptelement erstellen und an document.body anhängen. funktionierte nicht

Answer 1

Also das Problem herausgefunden. Nur das Rendern des JavaScript-Codes wird die Ereignisse nicht anhängen. Sie benötigen den Code, der für die anzuhängenden Ereignisse ausgeführt werden soll. Entfernen Sie Tags aus Ihrer Javascript-Zeichenfolge und verwenden Sie dann die Eval-Funktion.

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

Haftungsausschluss: eval ist bekannt, Probleme zu verursachen. obwohl ich noch keinem begegnet bin.

Answer 2

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

In diesem Teil Sie fetchComp Funktion aufrufen, die setState Methode hat. Sie sollten einen Status nicht ohne Bindung durch Ereignisse festlegen. Dadurch wird eine Endlosschleife erstellt, und Ihre Anwendung verhält sich merkwürdig.