javascript - 组件属性中第二个自动生成的元素是什么？

创建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会同时删除包围的数组和最后一个元素。

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

最佳答案

用props和legacy context调用无状态组件。

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

GrandChild.contextTypes = {
  something: PropTypes.string
}