「dangerouslySetInnerHTML」を使用して HTML 変数を JSX に安全に挿入するにはどうすればよいですか?

JSX への React 変数の埋め込み:危険な方法で SetInnerHTML を使用した魔法のトリック

React では、JSX コード内の変数と HTML をシームレスに統合することができます。トリッキーなビジネス。次のような HTML マークアップを含む React 変数があるとします。

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

この HTML を React コンポーネントに挿入するには、次のようなことをしたくなるかもしれません。

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

ただし、この方法では、期待どおりに魔法のように HTML がレンダリングされるわけではありません。これを行うには、特別な React プロパティを使用する必要があります。dangerlySetInnerHTML.

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

dangerlySetInnerHTML を使用すると、React は変数の値を信頼された HTML として扱い、それを直接レンダリングします。これにより、コンポーネントに HTML スニペットを動的に挿入できるようになり、柔軟性と効率が向上します。

注意: 使用には注意してください

dangerouslySetInnerHTML は強力なツールですが、次の機能が付属しています。安全上の警告。 React アプリケーションに HTML を直接埋め込むことができるため、XSS 攻撃などのセキュリティ上の脆弱性が発生する可能性があります。したがって、このプロパティは常に注意して使用し、絶対に必要な場合にのみ使用してください。

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