「dangerouslySetInnerHTML」を使わずに React で生の HTML を安全にレンダリングする方法は?

より安全なメソッドを使用して React で生の HTML をレンダリングする

React では、危険な SetInnerHTML の使用を回避し、より安全なメソッドを使用して生の HTML をレンダリングできるようになりました。 。ここに 4 つのオプションがあります:

1. Unicode エンコーディング

UTF-8 でエンコードされたファイル内の HTML エンティティを表すには Unicode 文字を使用します。

<div>{`First \u00b7 Second`}</div>

2. JSX 文字列内の Unicode 番号

HTML エンティティを JSX 文字列内の Unicode 番号に変換します:

<div>{`First ` + String.fromCharCode(183) + ` Second`}</div>

3.文字列と JSX 要素の混合配列

文字列と JSX 要素を組み合わせて複雑な HTML をレンダリングします:

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

4. DangerouslySetInnerHTML を最後の手段として使用する

潜在的なセキュリティ上の脆弱性が発生するため、dangerouslySetInnerHTML は最後の手段としてのみ使用してください:

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

以上が「dangerouslySetInnerHTML」を使わずに React で生の HTML を安全にレンダリングする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。