Question

在某个地方，我看到了一个像这样的代码： -

var App = <div> Hello World </div>;
ReactDOM.render(<App />, <selector>)

它工作正常，但我不明白这里发生了什么？第一行将转换为

var App = React.createElement("div", null, "Hello World");

和<App />将转换为

ReactDOM.render(React.createElement(App, null), <selector>);

这是否有效（工作正常）？以及这是如何工作的？我认为，当我们在createElement中传递一个React Element实例时，它会检测它的类型（找出类或组件）并创建类型的元素？所以我们在这里创建2个React Element？

抱歉弱engilsh; - （

Answer 1

这是一种匿名的jsx函数。它没有将App声明视为html或javascript，而是将其视为jsx。无论你使用什么transipler都会转换它。

有关文档，请参阅第4个片段

您可以将代码粘贴到babel Repl中。它将它转换为React.createlement函数。

编辑错过了几个问题

正如所指出的，它将javascript转换为ecma 5. jsx正在转换为React.createlement。该函数有几个参数。

元素类型（ div，li，ul等）
属性think class =＆＃34; Pretty＆＃34; style =＆＃34; background：black;＆＃34;等（注意使用jsx类时引用为className ）
儿童属于它的元素。

在您的示例中，您有一个字符串 Hello World 作为孩子。这很容易被其他元素取代。这是jsx的核心。您正在构建一些较小的组件以形成应用程序。