서비스 측 렌더링 된 구성 요소에 대한 이벤트 바인딩이 없습니다.

Question

reactjs.net을 사용하여 서버 측 구성 요소를 렌더링하고 있습니다. 내 문제는, 나는 ajax 호출을 통해 구성 요소와 해당 자바 스크립트에 대한 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); 
} 

이제이 기능은 몇 개의 버튼을 클릭하면 발생합니다. 수신 된 문자열이 렌더링 된 후. 렌더링 구성 요소에 대한 이벤트가 작동하지 않습니다

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

을 다음과 같이

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


     }); 
} 

렌더링 방법이다. javascript 필수 이벤트가 구성 요소와 함께 렌더링 되었더라도.

편집 : 스크립트 요소를 만들고 document.body에 추가하여 스크립트를 본체에 추가하려고 시도했습니다. 당신이 setState를 메소드가 fetchComp 함수를 호출하는이 부분에서

Answer 1

문제를 파악했습니다. 자바 스크립트 코드를 렌더링하면 이벤트가 첨부되지 않습니다. 이벤트가 연결되도록 코드가 필요합니다. 자바 스크립트 문자열에서 태그를 제거한 다음 eval 함수를 사용하십시오.

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

면책 조항 : 평가는 문제를 일으킨다 고 알려져있다. 나는 아무 것도 만나지 않았지만.

Answer 2

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

를 작동하지 않았다. 이벤트를 통해 바인딩하지 않고 상태를 직접 설정해서는 안됩니다. 이렇게하면 무한 루프가 만들어져 응용 프로그램이 이상하게 작동합니다.