javascript 在React/JSX中将花括号渲染为纯文本

9nvpjoqh 于 2023-11-15 发布在 Java

关注(0)|答案(5)|浏览(139)

我在React中将{ and }显示为文本时遇到了问题。我看到了一个类似的问题，有人说要将整个字符串用curlies Package 起来，但这不起作用：

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

来源：https://stackoverflow.com/questions/46614716/render-curly-braces-as-plain-text-in-react-jsx

5条答案

按热度按时间

smdncfj31#

如果您想在JSX文档中将花括号呈现为纯文本，只需使用HTML字符代码。
左 curl 支撑{：{
右 curl 支撑}：}

赞(0）回复(0）举报 2023-11-15

ecbunoof2#

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

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

字符串
但是你需要这个（注意关闭的p标签而不是另一个打开的标签）：

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

型

赞(0）回复(0）举报 2023-11-15

uujelgoq3#

你甚至可以在ES6中使用字符串插值。模板字面量是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。模板字面量用反引号（）（重音符）字符包围，而不是双引号或单引号。

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

字符串

赞(0）回复(0）举报 2023-11-15

kuarbcqp4#

如果你不能使用{和}，那么你可以使用自定义代码：

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

字符串
输出文本Some object {id: 1}。
更新：由于@xec，将其更改为更好的解决方案

赞(0）回复(0）举报 2023-11-15

s5a0g9ez5#

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

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

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 在React/JSX中将花括号渲染为纯文本

5条答案

相关问题

热门标签

最新问答