Question

我遇到了一个奇怪的语法，该语法实际上似乎有效，但是我不确定如何。

function Person(props) {
  return (
    <div className="person">
      <h1>{props.name}</h1>
      <p>Your Age {props.age}</p>
    </div>
  );
}

var app = (
  <div>
    <Person name="Rank" age="42"/>
    <Person name="Frank" age="22"/>
  </div>
)

console.log(app)

ReactDOM.render(app, document.querySelector('#root'));

我不理解的是第二种语法，var app =（..）。

我知道React编译器将使用app的内容在最后生成createElement类型的代码，浏览器可以理解。我不明白的是分配给应用程序变量的语法，这甚至不是有效的JavaScript语法。

Answer 1

在这里，app是用JSX语法编写的element，您正在将其呈现到DOM中。因此，它不是您所想的Javascript，而是有效的React语法，此处为JSX。

我们在React中将JSX渲染到DOM中。如您的示例一样，直接使用用JSX编写的element或使用component 返回一个或多个JSX元素。同样，在您的示例中，如果您使用Person组件而不是app，它将返回一个JSX，并将其呈现到DOM中。

只需查看official documentation上的JSX简介即可。

Answer 2

Babel将在实际运行代码之前先对其进行编译。在这种情况下，babel将使用babel-plugin-transform-jsx之类的插件转换那些JSX。

您可以在线here进行试用。

实际上，当您编写此代码时：

const a = (
  <div>
    asdasd
  </div>
);

Babel会将其转换为：

var a = React.createElement(
  "div",
  null,
  "asdasd"
);

您知道，每个JSX实际上只是对React.createElement的调用，并带有一些自变量。因为一遍又一遍地输入React.createElement来编写React应用程序会效率极低并且令人沮丧，因此React的开发人员允许我们改为使用JSX语法。这可以帮助开发人员更好，更快地工作，但要求代码在运行之前先进行编译。

var a =（<div>罗马</div>）这种语法在ReactJS中如何工作？

2 个答案: