1。特别道具'儿童'

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也是一个了解React属性的children组件？

此代码也有效：

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是一个组件数组，它将生成代码以将所有这些组件放在第一个组件中（例如，<li>内的几个<ul>。

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

2。 JSX，React.createElement和children

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

a。编写此代码时

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

它实际上是在

中转换的

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

b。此代码

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。）。它生成相同的组件。

参考文献：

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

1 个答案:

1。特别道具'儿童'

2。 JSX，React.createElement和children