JSXの嵌まりどころ
JSXはHTMLのように見えますが、幾つかの重要な違いが存在します。
注意:
インラインstyle属性のようなDOMの違いについては、こちらを参照して下さい。
HTML実体参照
JSXのリテラルのテキストにHTML実体参照を挿入することが可能です。
<div>First · Second</div>
動的なコンテンツ内にHTML実体参照を表示したい場合、デフォルトでReactが広範囲に及びXSS攻撃を防護するために、 表示する全ての文字列に対してエスケープ処理を行うため、二重エスケープの問題が発生します。
// 悪い例: "First · Second"と表示される
<div>{'First · 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>·</span>, ' Second']}</div>
最終手段として、生のHTMLを直接挿入してしまう方法もあります。
<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
カスタムHTML属性
HTMLの使用には存在しないプロパティをネイティブのHTML要素に渡しても、Reactはこれを描画しません。
もしカスタム属性を使用したいのであれば、data-接頭辞を付けるべきです。
<div data-custom-attribute="foo" />
aria-で始まるWebアクセスビリティの属性は適切に描画されます。
<div aria-hidden={true} />