在 props.children 中转义大括号

Question

我正在尝试使用以下 JSX 代码段传递要作为 this.props.children 处理的 Handlebars 模板：

<MyComponent>
  My address is {{address}}.
</MyComponent>

结果是Uncaught ReferenceError: address is not defined。

解决方法是使用类似的东西：

<MyComponent>
  <span content="My address is {{address}}."></span>
</MyComponent>

然后使用this.props.children.props.content。这是我发现从根本上避免 {{address}} 被 JSX 解释为插值的唯一方法。

有没有直接的方法来转义 JSX 中的花括号？

Answer 1

尝试将组件内容包裹在花括号中：

<MyComponent>
  {"My address is {{address}}."}
</MyComponent>

大括号内的所有内容都是一个表达式，不会被解析为JSX。至少，它适用于 Babel REPL

Answer 2

试试这个：

<MyComponent>
  {'My address is {{address}}.'}
</MyComponent>

Answer 3

因为我还不能发表评论... ;) 当然，您不必转义整个文本 - 只需转义大括号即可。你在你的情况下做什么是个人喜好的问题。

<MyComponent>
 My address is {"{{"}address{"}}"}.
</MyComponent>

Answer 4

由于ES6中引入了Template Literals，我们这里可以直接使用，不用引入太多花括号。

render() {
     let address = 'Somewhere on this earth!';
     return (
        <MyComponent>
            {`My address is ${address}`}
        </MyComponent>    
     );
}

Link 到 JSFiddle

希望这对您有所帮助:)

Answer 5

我建议您使用新的 JavaScript 字符串文字。

这个：

{`{}`}

应该打印：

{}

因此，在您的情况下，将其全部设为字符串

{`My address is {{address}}.`}

应该打印：

My address is {{address}}.

和平！ ✌️

在 props.children 中转义大括号

Escape Curly Brackets in props.children

javascript

reactjs

react-jsx