React での HTML エスケープ

UTF-8 文字 {code...} を使用して固定コンテンツを JSX で直接出力します。動的コンテンツをエスケープするには、HTML エスケープ文字 {code...} または 10 進エスケープ文字 {code...} を使用します。ただし、レイヤーを追加した場合この記事では、React で HTML をエスケープする方法を紹介します。

1. UTF-8文字を直接使用

   <p>版权 ©</p>

2. HTMLエスケープ文字を使用

   <p>版权 &copy;</p>

   または10進エスケープ文字

   <p>版权 &#169;</p>

動的コンテンツのエスケープ

ただし、外部にレイヤーを追加した場合中括弧を使用すると、React は XSS を防ぐためにエスケープされた文字エンティティを再度エスケープします

React は XSS を防ぐために DOM に表示されるすべての文字列をエスケープします。したがって、JSX に © (©) などのエスケープされたエンティティ文字が含まれている場合、React は © の特殊文字を自動的にエスケープするため、最終的な DOM では正しく表示されません。

<p>{'版权 &#169;'}</p>

エラー出力

版权 ©

正しい書き方:

1. UTF-8文字を直接使用しても正しく出力できます

   <p>{'版权 ©'}</p>

2. 安全な方法は、対応するUnicodeコードを使用することです

   <p>{'版权 \u00a9'}</p>

3. fromCharCodeを使用してください

   <p>{'版权 ' + String.fromCharCode(169)}</p>

4. 配列アセンブリを使用する

   <p>{['版权 ', <span>&#169;</span>]}</p>

5. 危険な SetInnerHTML を使用すると、React のエスケープ文字を回避できます

   <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />

リファレンス

1. JSX の注意事項

2. React テクノロジー スタックの詳細

出力JSX 固定コンテンツ

1. UTF-8 文字を直接使用

   <p>版权 ©</p>

2. HTML エスケープ文字を使用

   <p>版权 &copy;</p>

   または 10 進エスケープ文字

   <p>版权 &#169;</p>

動的コンテンツの場合はエスケープ

ただし、外部の場合は追加した場合中括弧のレイヤーを使用すると、React は XSS を防ぐために、エスケープされた文字エンティティを再度エスケープします。DOM に表示されるすべての文字列をエスケープします。したがって、JSX に © (©) などのエスケープされたエンティティ文字が含まれている場合、React は © の特殊文字を自動的にエスケープするため、最終的な DOM では正しく表示されません。

<p>{'版权 &#169;'}</p>

エラー出力

版权 ©

正しい書き方:

UTF-8文字を直接使用しても正しく出力できます

<p>{'版权 ©'}</p>

1. 安全な方法は、対応するUnicodeコードを使用することです

   <p>{'版权 \u00a9'}</p>

2. fromCharCodeを使用してください

   <p>{'版权 ' + String.fromCharCode(169)}</p>

3. 配列アセンブリを使用する

   <p>{['版权 ', <span>&#169;</span>]}</p>

4. Reactエスケープ文字を避けるために危険なSetInnerHTMLを使用する

   <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />

5. 以上の内容はReactにおけるHTMLエスケープの書き方であり、皆様のお役に立てれば幸いです。

関連する推奨事項:

React でコンポーネントを記述する方法

React と Preact の setState の違い

React イベント システムの知識

以上がReact での HTML エスケープの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。