ReactJS 键属性类型

Question

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

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

小提琴在这里：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);