web-dev-qa-db-ja.com

Reactjsを介して実行されるスクリプトタグを動的に挿入します

これにはたくさんの答えがありますが、私は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>
    );
  }
});

スクリプトタグはページにありますが、実行されません。他の回答が示すように、reactの外に出て、古き良きDOMスクリプトを使用する必要がありますか？

reactjsreact-jsx
12
Kelly Milligan

私が理解していることですが、反応する方法は、「c​​omponentDidMount」関数を使用して、外部スクリプトを含め、必要なものをdivに挿入することです。

コンポーネントが動的で、定期的に新しい小道具を受け取る場合は、他のメソッド（componentDidUpdateなど）も検討する必要があります。

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