react.dev/docs/02.3-jsx-gotchas.ja-JP.md

id	title	permalink	prev	next
jsx-gotchas	JSXの理解	jsx-gotchas-ja-JP.html	jsx-spread-ja-JP.html	interactivity-and-dynamic-uis-ja-JP.html

JSXはHTMLに似ていますが、重要な違いがいくつかあります。

注意: インラインの style 属性のようなDOMの違いについては、こちらを確認してください。

HTMLのエンティティ

以下のように、JSXの文字のテキストの中にHTMLのエンティティを挿入することができます。

<div>First &middot; Second</div>

動的なコンテンツとしてHTMLのエンティティを表示する際に、ダブルエスケープを書いてしまうことがあるかと思いますが、Reactはデフォルトで広い範囲のXSS攻撃を防ぐために表示しようとしている全ての文字列をエスケープします。

// 悪い例: 以下は "First · Second" を表示します。
<div>{'First &middot; Second'}</div>

この問題を防止するためにはいくつかの方法があります。最も簡単な方法は、unicodeの文字を直でJavaScriptに記述する方法です。その際には、ファイルがUTF-8で保存されていることと、ブラウザが正しく表示できるように、UTF-8で表示する命令が正しくセットされていることを確認してください。

<div>{'First · Second'}</div>

さらに安全な代替の方法は、エンティティに対応するunicodeの数値を見つけて、JavaScriptの文字列の中でそれを使うことです。

<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

配列と文字列とJSXの要素を混ぜて使うこともできます。

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

最後の手段として、常に生のHTMLを挿入することもできます。

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

カスタムされたHTMLの属性

HTMLの仕様書に存在しない要素をネイティブなHTML要素に渡した場合は、Reactはそれらをレンダリングしません。カスタムした属性を使う場合は、 data- を頭につけてください。

<div data-custom-attribute="foo" />

aria- から始まるWebアクセシビリティ属性はプロパティをレンダリングします。

<div aria-hidden={true} />