☰

React 変数ステートメント (JSX) で HTML を挿入する [重複] 質問する

tag-icon • tag-icon javascript html reactjs
React 変数ステートメント (JSX) で HTML を挿入する [重複] 質問する

React を使用して何かを構築していますが、JSX に React 変数を含む HTML を挿入する必要があります。次のような変数を使用する方法はありますか。

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

そしてそれをこのようにReactに挿入して動作させるにはどうすればいいでしょうか?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

期待どおりに HTML を挿入できますか? これをインラインで実行できる react 関数や、これを機能させる解析方法については、見たことも聞いたこともありません。

ベストアンサー1

使用できます危険な内部HTMLの設定例えば

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

おすすめ記事