React: a tag de script não funciona quando inserida usando DangerouslySetInnerHTML

Question

Feb 24, 2016, 11:48 PM

React: a tag de script não funciona quando inserida usando DangerouslySetInnerHTML

Eu estou tentando definir html enviado do meu servidor para mostrar dentro de uma div usando a propriedade dangerousouslySetInnerHTML no React. Eu também tenho uma tag de script dentro dela e uso funções definidas da mesma dentro desse html. Eu fiz exemplo de erro no JSFiddleaqui.

Este é o código de teste:

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

var Hello = React.createClass({
  displayName: 'Hello',
  render: function() {
    return (<div dangerouslySetInnerHTML={{__html: x}} />);
  }
});

Eu verifiquei e a tag de script é adicionada ao DOM, mas não é possível chamar as funções definidas nessa tag de script. Se essa não for a maneira correta, existe alguma outra maneira pela qual eu possa injetar o conteúdo da tag de script.