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

时间:2014-12-17 16:20:51

标签: reactjs react-jsx

这方面有很多答案,但我正在寻找特定于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>
    );
  }
});

页面上有脚本标记,但没有执行。我是否应该做出反应并且只是使用好的ol&#39; DOM脚本作为其他答案表明?

1 个答案:

答案 0 :(得分:10)

根据我的理解,反应方式是使用“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>
    );
  }
});