yucatio@システムエンジニア

趣味で作ったものいろいろ

React(JSX)で波括弧をエスケープしたい

ReactのJSX内で波括弧({})を通常の文字として出力しようとしたところ、エラーになってしまったので、回避方法を記載します。

うまくいかない例

function App() {
  return (
    <div>
      <div>JavaScriptではオブジェクトを、{key: value} の形式で作成できます。</div>
    </div>
  );
}

こちらを実行すると、

Parsing error: Unexpected token, expected "}"

のエラーが表示されます。

f:id:yucatio:20191208214113p:plain

エラーの原因

JSXでは{}の間は式として解釈されます。上の例でいうと、{key: value}の、key: valueの部分は式でなければいけないのですが、これは式ではないためエラーになっています。 また、今回は式として認識されたくないので、何かしらのエスケープ処理が必要になります。

解決方法

Escaping curly brackets · Issue #1545 · facebook/react · GitHub

こちらに回答されている通り、 最初の開き波括弧を{}の中に文字列表現として記載します。{'{'}のようになります。

この解決策を使って最初のコードを書き換えたのが以下です。

function App() {
  return (
    <div>
      <div>JavaScriptではオブジェクトを、{'{'}key: value} の形式で作成できます。</div>
    </div>
  );

実行結果です。波括弧が文字列として表示されました。

f:id:yucatio:20191208215259p:plain

環境