HTML コンテンツを React コンポーネントに動的に挿入するにはどうすればよいですか?

React の危険な SetInnerHTML を利用して HTML コンテンツを動的に挿入する

React 開発の領域では、開発者は多くの場合、HTML コンテンツを動的に挿入する必要性に直面します。アプリケーションの状態に基づいて変化します。ここで、JSX 内で React 変数ステートメントを使用するという概念が登場します。

HTML を含む次のような変数があるシナリオを考えてみましょう。

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

目標JSX を使用してこの HTML を React コンポーネントに挿入します。ただし、以下に示す標準的な方法を使用してこれを実行しようとしても機能しません。

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

これは、React が HTML コンテンツを文字列として扱い、その HTML 文字をエスケープするためです。 React 変数を使用した HTML の動的挿入を有効にするには、dangerlySetInnerHTML と呼ばれる特別な React プロパティを利用する必要があります。このプロパティを使用すると、HTML 文字をエスケープする React のデフォルト動作をバイパスし、生の HTML コンテンツを DOM に挿入できます。

これを実装するには、コードを次のように変更します。

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

危険なほどSetInnerHTML を使用すると、変数に基づいて複雑な HTML コンテンツを React コンポーネントに動的に挿入できるため、アプリケーションの柔軟性と表現力が向上します。

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