web-dev-qa-db-ja.com

中かっこをプレーンテキストのreact / jsxとしてレンダリングする

Reactで{および}をテキストとして表示する際に問題が発生します。ストリング全体をカーリーで囲むと誰かが言った同様の質問を見ましたが、これはうまくいきません：

_let queries_block = this.state.previous_queries.map((dataset) => {
            return (<p>{"{{}}"}<p>)
        });

        if (results) {
            results_block = (
                <div>
                    <p>Queries:</p>
                    {queries_block}
                    <br/><br/>
                    <p>Results: {results_count}</p>
                    <JSONPretty id="json-pretty" json={results}></JSONPretty>
                </div>
            );
        } else {
            results_block = null;
        }
_

return (<p>{"{{}}"}<p>)が原因

_ERROR in ./src/components/app.js
Module build failed: SyntaxError: Unexpected token, expected } (47:13)

  45 |                     <JSONPretty id="json-pretty" json={results}></JSONPretty>
  46 |                 </div>
> 47 |             );
     |              ^
  48 |         } else {
  49 |             results_block = null;
  50 |         }

 @ ./src/index.js 15:11-38
webpack: Failed to compile.
_

Jsxで中括弧をエスケープする簡単な方法はありますか？

javascriptreactjsjsx
14
codyc4321

問題は単なるタイプミスだと思います。あなたはこれを持っています：

return (<p>{"{{}}"}<p>)

しかし、これが必要です（別の開始タグではなく、終了pタグに注意してください）。

return (<p>{"{{}}"}</p>)
11
smarx

中かっこをJSXドキュメント内のプレーンテキストとしてレンダリングする場合は、HTML文字コードを使用します。

左中括弧{：&#123;

右中かっこ}：&#125;

11
Rob LaFave