JSX で React 変数を使用して HTML コンテンツを挿入するにはどうすればよいですか?

JSX での React 変数を使用した HTML の組み込み

React を使用してアプリケーションを構築しており、その中で React 変数を使用して HTML コンテンツを挿入する機能が必要です。あなたのJSX。これを実現するための解決策は次のとおりです。

dangerlySetInnerHTML の使用

必要な機能を実現するには、dangerlySetInnerHTML プロパティを使用できます。このプロパティを使用すると、要素の HTML コンテンツを文字列として直接設定できます。これを使用する方法の例を次に示します。

<code class="jsx">render: function() {
    const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

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

HTML の文字列値を thisIsMyCopy 変数に代入し、それをjarangerlySetInnerHTML の __html 値として設定することで、目的の HTML コンテンツを効果的に挿入できます。 React コンポーネント内で。これにより、要素内で HTML が期待どおりにレンダリングされます。

その他の考慮事項

dangerlySetInnerHTML は、適切に処理しないとセキュリティ リスクになる可能性があることに注意することが重要です。これにより、任意の HTML をレンダリングできるようになり、XSS 脆弱性が発生する可能性があります。したがって、挿入する HTML コンテンツが信頼できるものであり、信頼できるソースからのものであることを確認することが重要です。

以上がJSX で React 変数を使用して HTML コンテンツを挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。