在大括号中将花括号渲染为纯文本 [英] Render curly braces as plain text in React/JSX

问题描述

我在React中以文本显示{和}时遇到问题.我看到了一个类似的问题，有人说要把整个字符串包裹在小卷中，但这是行不通的:

I am having problems displaying { and } as text in React. I saw a similar question that someone said to wrap the entire string in curlies, but this is not working:

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中转义花括号?

Is there an easy way to escape curly braces in jsx?

推荐答案

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

I think the issue is just a typo. You have this:

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

但是您需要这样做(请注意，关闭的p标记而不是另一个打开的标记):

but you need this (note the closing p tag instead of another opening one):

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

这篇关于在大括号中将花括号渲染为纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！