注入的JavaScript如何在'；{}'；？

在JSX中，当我们想在JSX之间添加JavaScript时，我们使用“{}”，这表示注入的JavaScript。

---

我想知道这是怎么回事？{}如何作为JavaScript处理？它与“${}”不同吗？我们在字符串插值中使用它。

简而言之，它是标记化、解析和生成抽象语法树AST。这个{}它是允许的表达式之一。但是你可以想象它的调用eval（）

但是如果你这么好奇的话

JSX只是一个例子，它由巴贝尔传输，因此您可以检查内部范围是如何处理的：

这意味着，“如何将{}视为JavaScript”的答案是通过将内部作用域传递给

React.createElement

-

子对象
agrument

React.createElement(
  type,
  [props],
  [...children]
)

他们非常相似。在JSX中，当您正在编写JSX标记时，解释程序遇到“代码> {表达式} /代码>时，它确实会评估<代码>某个表达式< /代码>为JavaScript（而不是JSX标记），以及：


如果在React子项的上下文中，则将结果表达式作为字符串插入标记中，例如：

<div>
{someExpression}
</div>

编译成

return React.createElement('div', null, `Hello ${this.props.toWhat}`);


或者，如果在道具的上下文中，表达式将作为道具传递给组件，例如：

<div onClick={someExpression}> 
</div>


这是编译器的工作。这种语法是JSX语言的一部分，您可能会问
var
关键字是如何工作的
<div>Hello {this.props.toWhat}</div>

return React.createElement('div', null, `Hello ${this.props.toWhat}`);

<div onClick={someExpression}> 
</div>

<Hello toWhat={SomeExpression} />,

React.createElement(Hello, {toWhat: SomeExpression}, null),