【React】{}構文内で実体参照に対応する文字を表示する方法

この記事では『{}構文内で実体参照に対応する文字を表示する方法』について、

Unicode番号を直接使用して、実体参照に対応する文字を表示する方法
dangerouslySetInnerHTML属性を使用して、実体参照に対応する文字を表示する方法

などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

{}構文で実体参照に対応する文字を表示する方法

{}構文内に実体参照に相当する文字を表示したい場合には、Unicode番号を直接使用するか、dangerouslySetInnerHTML属性を使用する必要があります。

Unicode番号を直接使用する場合

{}構文内に実体参照に相当する文字を表示するには、実体参照に相当するUnicode番号を見つけて、{}構文の内部でのそのUnicode番号を使用します。以下にサンプルコードを示します。

function App() {
  return (
    <>
      {/* エスケープシーケンスを利用 */}
      <p>{'First \u00b7 Second'}</p>
      {/* Unicode番号から取得 */}
      <p>{'First ' + String.fromCharCode(183) + ' Second'}</p>
      {/* Unicode番号から取得(テンプレートリテラルを使用した場合) */}
      <p>{`First  ${String.fromCharCode(183)}  Second`}</p>
    </>
  );
}

export default App;

記述のシンプルさからエスケープシーケンスを利用するのがおすすめです。

なお、以下のサンプルコードに示すように、{}構文内に実体参照を記述しなければ、意図したとおりに実体参照に相当する文字(ここでは・)が表示されます。

function App() {
  return (
    <>
      <p>First · Second</p>
    </>
  );
}

export default App;

dangerouslySetInnerHTML属性を使用する場合

エスケープ処理を抑制するdangerouslySetInnerHTML属性を用いて、生のHTMLを直接挿入しても、{}構文内に実体参照に相当する文字を表示することができます。以下にサンプルコードを示します。

function App() {
  return (
    <>
      {/* dangerouslySetInnerHTML属性を利用 */}
      <p dangerouslySetInnerHTML={{ __html: 'First · Second' }}></p>
    </>
  );
}

export default App;

ただし、dangerouslySetInnerHTML属性を使用すると、生のHTMLが挿入されるので、XSS(クロスサイトスクリプティング)攻撃のリスクがあります。この属性はその名の通り「dangerously」な(危険な)操作であり、使用時には十分な注意が必要です。

【React】{}構文内で実体参照に対応する文字を表示する方法

{}構文で実体参照に対応する文字を表示する方法

Unicode番号を直接使用する場合

dangerouslySetInnerHTML属性を使用する場合

エスケープ処理とは？HTML・JavaScript・URLの例でわかりやすく解説！