Reactjs - 如何在重用组件中正确处理键

Question

我最近开始使用Reactjs,我发现它非常有趣.密钥是关于身份的,因此通过唯一密钥识别每个组件是可行的方法,对吧？假设我有这个例子:

var fruits = [
  {'fruitId': 351421, 'fruit': 'banana'},
  {'fruitId': 254134, 'fruit': 'apple'},
  {'fruitId': 821553, 'fruit': 'orange'}
];

React.DOM.ul(null, fruits.map(function(item) {
  return (
    React.DOM.li({
      key: item.fruitId
    }, item.fruit)
  );
}));

请注意大ID号码.现在,我的问题是,使用数字作为ID或字符串如哈希作为ID更好吗？

谢谢!!

Answer 1

它真的没关系,唯一重要的是键在父元素中的兄弟姐妹中是唯一的.它不必在整个应用程序中是唯一的,只需在您要附加这些项目的父级内部.

通常用于对元素进行简单迭代,例如,<li>或者<option>只需在迭代器中使用索引即可.

例如:

var options = [];
for (var i=0; i<this.props.options.length; i++) {
    var option = this.props.options[i];
    options.push(
        <option key={i} value={option.value}>{option.name}</option>
    );
}

唯一一次不能正常工作的是,如果您稍后在不同的订单等中添加/删除键控元素,以便您的密钥可能与另一个兄弟冲突.在这种情况下,您将希望以其他方式生成密钥以确保它是唯一的 - 或者使用模型中已知的唯一密钥.无论你做什么,只要它在兄弟姐妹中独一无二,它就没事了.