中括弧をプレーンテキストとして表示するreact/jsx

Question

{および}を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で中括弧をエスケープする簡単な方法があります？

Answer 1

私は問題がちょうどタイプミスだと思う。あなたは、この持っている：

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

をしかし、あなたは、この（代わりに別の開口部1の開閉pタグに注意してください）必要があります：あなたはJSX内のプレーンテキストとして中括弧をレンダリングしたい場合

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

Answer 2

を文書は単にHTML文字コードを使用します。

左中括弧{：{

右中括弧}：}