Question

我目前正在努力学习React，也许我只是困了并且遗漏了一些东西，但我需要问：

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

此代码“按预期工作”，打印“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
);

Answer 1

如您所见，在render函数中，还有一个附加参数传递给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"）

Answer 2

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

当您调用

时

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

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

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

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

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

所以你可能错过的是你可以将任意数量的参数传递给createElement方法，所有以第3个开头的参数将被渲染为兄弟元素。

这个React示例如何工作？

2 个答案: