Javascript 我的React组件是如何理解'；儿童'；财产？

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

import React from "react";

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

1.特别道具“儿童”

children

是一种特殊的道具，可自动传递到组件

您可以使用此特殊道具组合组件：

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

它实际上是在

export default（{children}）=>React.createElement（'div'{
样式：{fontWeight:'bold'}，
儿童:儿童,，
});

b.和此代码

导出默认道具=>；

转化为

export default props=>React.createElement（'div'{
样式：{fontWeight:'bold'}，
…props，//这会将子对象提取到对象中，即children:children
});

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

c.第一个示例的转换有些不同

此代码

导出默认道具=>(
{props.children}
);

转化为

export default props=>React.createElement（'div'{
样式：{fontWeight:'bold'}，
}，道具。儿童）；//它使用createElement的第三个参数

但是对于

React.createElement

，在第二个参数（如a.和b.）中有一个prop

子项

）相当于在第三个参数（c.）中传递子项。它生成相同的组件

---

参考资料：

---

{props.children}

与

{…props}

有很大不同。

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

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