ReactのJSX内で波括弧({
と}
)を通常の文字として出力しようとしたところ、エラーになってしまったので、回避方法を記載します。
うまくいかない例
function App() { return ( <div> <div>JavaScriptではオブジェクトを、{key: value} の形式で作成できます。</div> </div> ); }
こちらを実行すると、
Parsing error: Unexpected token, expected "}"
のエラーが表示されます。
エラーの原因
JSXでは{
と}
の間は式として解釈されます。上の例でいうと、{key: value}
の、key: value
の部分は式でなければいけないのですが、これは式ではないためエラーになっています。
また、今回は式として認識されたくないので、何かしらのエスケープ処理が必要になります。
解決方法
Escaping curly brackets · Issue #1545 · facebook/react · GitHub
こちらに回答されている通り、
最初の開き波括弧を{}
の中に文字列表現として記載します。{'{'}
のようになります。
この解決策を使って最初のコードを書き換えたのが以下です。
function App() { return ( <div> <div>JavaScriptではオブジェクトを、{'{'}key: value} の形式で作成できます。</div> </div> );
実行結果です。波括弧が文字列として表示されました。