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

Answer 2

在ES6中引入了Template Literals，我们可以在这里使用它们，而不会引入太多花括号。

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

链接到JSFiddle

希望这会有所帮助：）

Answer 3

试试这个：

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

Answer 4

因为我还没有发表评论......;）当然，你不必逃避整个文本 - 只是大括号。你在案件中做的事情是个人偏好。

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

Answer 5

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

这个：

{`{}`}

应该打印：

{}

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

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

应打印：

My address is {{address}}.

和平！ ✌️

在props.children中逃脱卷曲括号

5 个答案: