在React/JSX中将花括号呈现为纯文本。

Question

我在React中显示"{ }"为文本时遇到了问题。我看到有人提出将整个字符串用花括号括起来，但这并没有起作用：

我在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中有没有一种简单的方法来转义花括号?

- codyc4321

Answer 1

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

左花括号 { ：{

右花括号 } ：}

- Rob LaFave

Answer 2

我认为问题只是一个拼写错误。你的代码如下：

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

但你需要这样做（注意要闭合的p标签，而不是再次开启一个）：

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

- user94559

Answer 3

在ES6中，甚至可以使用字符串插值。 模板字面量是一种允许嵌入表达式的字符串字面量。您可以使用它们来使用多行字符串和字符串插值特性。 模板字面量使用反引号(``)字符而不是双引号或单引号进行括起来。

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

- Jeeva

---

在看到你的回答之前，我正准备提出这个建议。另一种方法是使用JSON.stringify。例如，<pre>{JSON.stringify(result, null, 4)}</pre>是一种快速而简单的打印JSON的方法。 - undefined

Answer 4

如果您处于无法使用{和}的情况下，您可以使用自定义代码：

export default class Component extends React.Component {
  render () {
    return (
      Some object {'{'}id: 1{'}'}
    )
  }
}

以下代码会输出文本Some object {id: 1}

更新：根据@xec的建议，对代码进行了优化

- dreamLo

---

为什么不直接使用Some object {'{'}id: 1{'}'}？ - xec

Answer 5

你也可以使用变量来表示花括号。例如：

const curlyBraces = '{}';
return This is an example for {cusrlyBraces} rendered in JSX

- Yashasvi Haldiya