これにはたくさんの答えがありますが、私は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スクリプトを使用する必要がありますか?
私が理解していることですが、反応する方法は、「componentDidMount」関数を使用して、外部スクリプトを含め、必要なものを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>
);
}
});