在 React/JSX 中将大括号渲染为纯文本答案

【问题标题】：Render curly braces as plain text in React/JSX在 React/JSX 中将大括号渲染为纯文本
【发布时间】：2018-03-18 18:57:39
【问题描述】：

我在 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 中转义花括号？

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

如果您想在 JSX 文档中将花括号呈现为纯文本，只需使用 HTML 字符代码。

左花括号 { : &#123;

右花括号}：&#125;

【讨论】：

【解决方案2】：

我认为这个问题只是一个错字。你有这个：

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

但是你需要这个（注意结束 p 标签而不是另一个开始标签）：

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

【讨论】：

【解决方案3】：

你甚至可以在 ES6 中使用字符串插值。模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。模板字面量由反引号 (` `)（重音）字符而不是双引号或单引号括起来。

eg: return (<p>{`{{}}`}</p>)

【讨论】：

这更容易做到，应该是公认的答案！