ReactJS 关键属性类型

Question

我找不到有关 key 属性允许的类型的文档。看起来类型 object 不是一个选项，当我使用纯 js 对象作为键时，我在控制台中收到“重复键警告”:

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

key 只需是一个基本类型，可以将其视为哈希值来确定唯一性。例如，字符串或数字。对象上没有像某些编程语言那样的内置 JavaScript 函数可以为对象实例返回唯一的哈希值。

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

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);