这个 React 示例是如何工作的？答案

【问题标题】：How does this React example work?这个 React 示例是如何工作的？
【发布时间】：2016-06-27 13:20:07
【问题描述】：

我目前正在尝试学习 React，也许我只是困了，错过了什么，但我需要问一下：

在这个代码示例中（来自 React 的“入门”页面），为什么要打印“World”？从我所见， this.props.name 被传递的地方，该函数正在寻找孩子，而不是拾取额外的文本输入。至少我是这样解释文档的：React.createElement。

这段代码“按预期工作”，打印“Hello World”......但谁能准确告诉我为什么它有效？我希望只看到“Hello”，并且可能会看到有关“World”未定义的控制台错误。对于任何回答的人，提前感谢您的解释。 ;)

var Hello = React.createClass({
 displayName: 'Hello',
 render: function() {
  return React.createElement("div", null, "Hello ", this.props.name);
 }
});

ReactDOM.render(
 React.createElement(Hello, { name: "World"}),
 container
);

【问题讨论】：

render方法中的对象{name: "World"}是你创建组件时作为参数设置的this.props.name的定义。

标签： reactjs

【解决方案1】：

如您所见，在渲染函数内部，有一个额外的参数传递给createElement 函数。

第一个参数是您要实例化的组件类，第二个是道具。这里我们定义了一个name 属性，其值为"World"。

由于Hello 组件接受名为name 的道具，它会将其与组件被告知包含的"Hello " 一起渲染出来。这是一个简单的div 元素。

Here you can see 为 React 公开的 createElement 函数定义和解释的参数。

即：

React.createElement("div", null, "Hello ", this.props.name);

元素类型 - div
道具 - null
两个孩子 - "Hello " 和 this.props.name（即 "World"）

【讨论】：

【解决方案2】：

React.createElement 函数获取要创建的元素的类型（如果传递一个字符串，它是一个 HTML 元素名称，但也可以是对 ReactClass 的引用），然后是 props 对象，然后未确定数量的子代作为以下参数。

当你调用时

React.createElement(Hello, { name: "World"})

您将 Hello 作为要实例化的 React 类传递，并将对象 { name: "World"} 作为 props，然后在 Hello 的所有方法中以 this.props 的形式提供，包括 render方法。

然后Hello元素（类）再次调用createElement：

React.createElement("div", null, "Hello ", this.props.name)

这里，"div" 是要创建的 HTML 元素的类型，props 是 null，"Hello " 和 this.props.name 都是要创建的子元素，在这个例子中是简单的字符串，第一个是文字字符串，第二个是对上面传递的props 对象中的键的引用。

所以您可能错过的是，您可以将任意数量的参数传递给 createElement 方法，并且所有以第 3 个开头的参数都将呈现为兄弟元素。

【讨论】：