为什么子项与React.children.toArray一起使用时键会发生变化

Why do keys change when children are used with React.Children.toArray?

本文关键字：变化 一起 React toArray children 为什么      更新时间：2023-09-26

如果我有一个带子级的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记录到控制台。为什么密钥从1更改为.$1？

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

注：React.Children.toArray（）更改键以在展开子级列表时保留嵌套数组的语义。也就是说，toArray在返回的数组中为每个键加前缀，这样每个元素的键的作用域都是包含它的输入数组

相关文章：