ReactJS 关键属性类型

Question

我找不到关于 key 属性的允许类型的文档。看起来类型 object 不是一个选项，我在使用普通 js 对象作为键时在控制台中得到 'duplicate keys warning' :

var someArray = [{name:1},{name:2}];
{someArray.map(function(o){
    return <div key={o}> {o.name} </div>
    })
}

fiddle 在这里：http://jsfiddle.net/iamfuric/gosbgm6q/

这是一个错误还是对象不受支持？

谢谢

Answer 1

我认为最好将键指定为唯一 ID 而不是对象。

因为键只需要在它的兄弟之间是唯一的，而不是全局唯一的，所以你可以在你的映射函数中添加一个索引并将它分配给键：

var someArray = [{name:1},{name:2}];
    {someArray.map(function(o, index){
         return <div key={index}> {o.name} </div>
    })
}

Answer 2

key只需要是一个基本类型即可，可以作为哈希值来判断唯一性。因此，例如一个字符串或一个数字。对象上没有内置的 JavaScript 函数，就像某些编程语言所具有的那样，可以 return 对象实例的唯一哈希值。

您要么需要使用现有的唯一值，要么人为地创建一些将保留在对象生命周期中的东西。

http://jsfiddle.net/wiredprairie/vkfr6wc5/1/

在我的示例中，我创建了一个简单的函数，如果属性尚不存在，它会向每个对象添加一个名为 _key 的唯一属性。然后我将其作为 key 属性传递给组件。

var Hello = React.createClass({     
    render: function() {
        var someArray = [{name:'name1'},
                         {name:'name2'}];     
         return <div> {someArray.map(function(o){
            unique(o);
            return <div key={o._key}> {o.name} - { o._key} </div>
         });
    }
});

var __unique = 0;
function unique(obj, key) {
    key = key || '_key';
    if(typeof obj === 'undefined' || obj === null) {
        return obj;
    }
    if(!obj[key]) {
        obj[key] = ++__unique;
    }
    return obj;
}

React.render(<Hello key="world" />, document.body);

ReactJS 关键属性类型

ReactJS key attribute type

reactjs