javascript - 转义 props.children 中的大括号

Question

我正在尝试使用以下 JSX 代码段传递一个 Handlebars 模板以作为 this.props.children 进行处理:

<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