以純文本形式渲染大括號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>) 

，但你需要這個（注意閉幕p標籤，而不是另一開口之一）：

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

Answer 2

如果您想渲染大括號的JSX內純文本文檔只需使用HTML字符代碼。

左大括號{：{

右大括號}：}