组件道具中第二个自动生成的元素是什么？

Question

创建 React 组件时会自动包含props.children。给定这样的东西：

const obj = {
a: 'val'
}
const Parent = () => <Child obj={obj} />
const Child = props => <GrandChild/>
const GrandChild = (...props) => <div>{JSON.stringify(props)}</div>

将打印：[{},{}]

将Child更改为

const Child = props => <GrandChild>child element</GrandChild>

将打印：[{"children":"child element"},{}]

所以我想第一个对象是为props.children保留的

将Child更改为

const Child = props => <GrandChild a="sth else">child element</GrandChild>

将打印[{"a":"sth else","children":"child element"},{}]

那里仍然有一个空物体。删除Grandchild上的...会同时删除包含数组和最后一个元素。

这个额外的元素是什么？为什么通过去除点差来消除它？

Answer 1

使用props和遗留上下文调用无状态组件。

const GrandChild = (props, context) => {   
return <div>{context.something}</div>
}
GrandChild.contextTypes = {
something: PropTypes.string
}