我在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中的花括号?
答案 0 :(得分:9)
我认为问题只是一个错字。你有这个:
return (<p>{"{{}}"}<p>)
但你需要这个(注意结束p
标签而不是另一个开放标签):
return (<p>{"{{}}"}</p>)
答案 1 :(得分:7)
如果您想在JSX文档中将花括号渲染为纯文本,只需使用HTML字符代码。
Left Curly Brace {:LayoutInflater inflater = LayoutInflater.from(this);
ConstraintLayout yourLayout = (ConstraintLayout) inflater.inflate(R.layout.your_layout, null, false);
CoordinatorLayout layout = new CoordinatorLayout(this);
// Set its property as you wish ...
layout.addView(mainScreen);
setContentView(layout);
正确的大括号}:{
答案 2 :(得分:1)
您甚至可以在ES6中使用字符串插值。
模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。
模板文字用反引号()(重音符)括起来,而不是双引号或单引号。
eg: return (<p>{`{{}}`}<p>)