动态插入将通过 Reactjs 执行的脚本标签

Question

对此有很多答案，但我正在寻找特定于 reactjs 的东西

我的组件代码：

  render: function () {

    return (
      <Modal {...this.props} title="Embed on your own site!">
        <div className="modal-body">
          <div className="tm-embed-container" dangerouslySetInnerHTML={{__html: embedCode}}>
          </div>
          <textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={embedCode}></textarea>
        </div>
      </Modal>
    );
  }
});

脚本标签在页面上，但没有执行。我是否应该像其他答案所表明的那样，不做反应，只使用良好的 DOM 脚本？

Answer 1

据我了解，反应方式是使用“componentDidMount”函数在 div 中插入您想要的内容，包括一些外部脚本。

如果您的组件是动态的并且定期接收新的道具，您还应该考虑其他方法（如 componentDidUpdate）。

更多关于在this question上使用 jQuery 插入脚本

  componentDidMount: function(){
    var embedCode = this.props.embedCode; // <script>//my js script code</script>
    
    $('#scriptContainer').append(embedCode);
    },

  render: function () {
    return (
      <Modal {...this.props} title="Embed on your own site!">
        <div className="modal-body">
          <div className="tm-embed-container" id="scriptContainer">
          </div>
          <textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={this.props.embedCode}></textarea>
        </div>
      </Modal>
    );
  }
});