React での HTML エスケープ-htmlチュートリアル-php.cn

React での HTML エスケープ

小云云

リリース： 2017-12-06 14:17:39

オリジナル

5455 人が閲覧しました

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

UTF-8文字を直接使用
```
版权 ©
```
ログイン後にコピー
ログイン後にコピー
HTMLエスケープ文字を使用
```
版权 &copy;
```
ログイン後にコピー
ログイン後にコピー
または10進エスケープ文字
```
版权 &#169;
```
ログイン後にコピー
ログイン後にコピー

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

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

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

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

ログイン後にコピー

エラー出力

版权 &#169;

ログイン後にコピー

正しい書き方:

UTF-8文字を直接使用しても正しく出力できます
```
{'版权 ©'}
```
ログイン後にコピー
ログイン後にコピー
安全な方法は、対応するUnicodeコードを使用することです
```
{'版权 \u00a9'}
```
ログイン後にコピー
ログイン後にコピー
fromCharCodeを使用してください
```
{'版权 ' + String.fromCharCode(169)}
```
ログイン後にコピー
ログイン後にコピー
配列アセンブリを使用する
```
{['版权 ', &#169;]}
```
ログイン後にコピー
ログイン後にコピー
危険な SetInnerHTML を使用すると、React のエスケープ文字を回避できます
```

```
ログイン後にコピー
ログイン後にコピー

リファレンス

JSX の注意事項
React テクノロジースタックの詳細

出力JSX 固定コンテンツ

UTF-8 文字を直接使用
```
版权 ©
```
ログイン後にコピー
ログイン後にコピー
HTML エスケープ文字を使用
```
版权 &copy;
```
ログイン後にコピー
ログイン後にコピー
または 10 進エスケープ文字
```
版权 &#169;
```
ログイン後にコピー
ログイン後にコピー

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

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

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

ログイン後にコピー

エラー出力
版权 &#169;
ログイン後にコピー
ログイン後にコピー
正しい書き方:

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

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

ログイン後にコピー

安全な方法は、対応するUnicodeコードを使用することです
```
{'版权 \u00a9'}
```
ログイン後にコピー
ログイン後にコピー
fromCharCodeを使用してください
```
{'版权 ' + String.fromCharCode(169)}
```
ログイン後にコピー
ログイン後にコピー
配列アセンブリを使用する
```
{['版权 ', &#169;]}
```
ログイン後にコピー
ログイン後にコピー
Reactエスケープ文字を避けるために危険なSetInnerHTMLを使用する
```

```
ログイン後にコピー
ログイン後にコピー
以上の内容はReactにおけるHTMLエスケープの書き方であり、皆様のお役に立てれば幸いです。