渲染花括号作为纯文本react/jsx

Question

我在React中将{和}显示为文本时遇到问题.我看到一个类似的问题,有人说将整个字符串包裹在curlies中,但这不起作用:

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

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

左卷曲支撑{: {

右卷曲}: }

Answer 2

我认为这个问题只是一个错字.你有这个:

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

但你需要这个(注意结束p标记而不是另一个开放标记):

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

Answer 3

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

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

Answer 4

如果您无法使用{and }，那么您可以使用自定义代码：

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

这将输出文本Some object {id: 1}

更新：将其更改为更好的解决方案，感谢@xec