我的React组件如何理解'儿童'属性？

Question

有一段时间，在撰写包装时，我正在使用：

import React from "react";

export default props => (
  <div style={{ fontWeight: "bold" }}>{props.children}</div>
);

但就在一秒钟之前，我遇到了这种很酷的技巧：

import React from "react";

export default props => <div style={{ fontWeight: "bold" }} {...props} />;

它是如何工作的，我的意思是， div也是一个了解children属性的React组件？

此代码也有效：

export default ({ children }) => (
  <div children={children} style={{ fontWeight: "bold" }} />
);

Answer 1

1.特殊道具'儿童'

children是React自动传递给组件的特殊支柱。

您可以使用此特殊支柱来组成组件：

const ComposedComponent = props => <div>{props.children}</div>

• 如果children是一个字符串，React将只在组件内写入文本。
• 如果children是另一种成分，它会生成代码，使你的第一个组件内该组件（例如，一个<span>里面<div>
• 如果children是一个组件数组，它将生成代码以将所有这些组件放在第一个组件中（例如， <ul>几个<li> <ul> ）。

当然， children组件可以有自己的children组件，因此React将递归循环遍历每个子组件以生成所有嵌套组件。

---

2. JSX，React.createElement和children

JSX为React.createElement(component, props, ...children)提供了语法糖。

一个。 当你写这个代码

export default ({ children }) => (
  <div style={{ fontWeight: 'bold' }} children={children} />
);

它实际上是转化而来的

export default ({ children }) => React.createElement('div', {
    style: { fontWeight: 'bold' },
    children: children,
});

湾 而这段代码

export default props => <div style={{ fontWeight: 'bold' }} {...props} />;

变成了

export default props => React.createElement('div', {
    style: { fontWeight: 'bold' },
    ...props, // this extracts children into the object, ie. children: children
});

因此，这两个示例生成相同的代码。

C。 你的第一个例子的转换有点不同。

这段代码

export default props => (
  <div style={{ fontWeight: 'bold' }}>{props.children}</div>
);

变成了

export default props => React.createElement('div', {
    style: { fontWeight: 'bold' },
}, props.children); // it uses createElement's third parameter

但对于React.createElement ，具有支柱children中的第二个参数（如在a。和b。）等效于使孩子在第三个参数（C）。 它生成相同的组件。

---

参考文献：

• https://reactjs.org/docs/jsx-in-depth.html
• https://reactjs.org/docs/composition-vs-inheritance.html