javascript - 为什么当子项与 React.Children.toArray 一起使用时键会改变？

Question

如果我有一个带有 child 的 React 组件，我调用 React.Children.toArray在这些子项上，为什么数组中的对象具有前缀为 .$ 的键

var Child = React.createClass({
    render: function() {
        console.log(React.Children.toArray(this.props.children)[0].key);
        return <div>{this.props.children}</div>
    }
});

var Container = React.createClass({
    render: function() {   
        return <Child><div key={1}>1</div></Child>
    }
});

ReactDOM.render(<Container />,  document.getElementById('container'));

这会记录 .$1到控制台。为什么 key 从 1 更改了至 .$1 ？

Answer 1

请参阅下面的注释 https://facebook.github.io/react/docs/top-level-api.html#react.children.toarray

Note: React.Children.toArray() changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, toArray prefixes each key in the returned array so that each element's key is scoped to the input array containing it.