タイトルは次のようになります。 危険な方法で SetInnerHTML を超えて: React で生の HTML をレンダリングするより安全な方法はありますか?

安全性が強化された React で生の HTML をレンダリングする

質問:

危険な SetInnerHTML を使用していますReact で生の HTML をレンダリングする唯一の方法?

回答:

質問で説明されている最初のメソッド以来、より安全な HTML レンダリングを保証するために React は進歩してきました。現在利用できるオプションは次の 4 つです:

1. Unicode

Unicode を使用して HTML 文字をエンコードします。ファイルを UTF-8 として保存し、文字セットを UTF-8 に設定します。例:

<div>{'\u00b7'}</div>

2. Unicode 番号

Unicode 番号を JavaScript 文字列に埋め込みます。

<div>{String.fromCharCode(183)}</div>

3.混合配列

文字列と JSX 要素を配列に結合します:

<div>{['First ', <span>&amp;middot;</span>, ' Second']}</div>

4. DangerouslySetInnerHTML (最後の手段)

最後のオプションとして、dangerouslySetInnerHTML を使用します:

<div dangerouslySetInnerHTML={{__html: 'First &amp;middot; Second'}} />

推奨事項:

最初の 3 つの方法が推奨されます安全性とメンテナンス性のために。絶対に必要な場合にのみ、dangerouslySetInnerHTML を使用してください。

以上がタイトルは次のようになります。 危険な方法で SetInnerHTML を超えて: React で生の HTML をレンダリングするより安全な方法はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。