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

Question

如果我有一个带孩子的反应组件并且我调用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到控制台。为什么密钥从 更改1为.$1？

Answer 1

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

注意：React.Children.toArray() 更改键以在展平子项列表时保留嵌套数组的语义。也就是说， toArray 为返回数组中的每个键添加前缀，以便每个元素的键范围限定为包含它的输入数组。