Question

React要求您对数组中的元素具有唯一的key属性。 React docs建议您使用数据中的id。如果您没有id，那么您可以将数组索引用作“最后的手段”，但需要注意的是，在重新排序项目时，使用索引会导致性能问题。在构建来自多个源数组的元素数组和多个.map()调用时，我也遇到了一些烦人的问题，每个调用都有不同的转换，在这种情况下，数组索引无论如何都不会是唯一的。

我已经开始将以下样板文件放入我的组件中：

constructor(props) {
    super(props);
    this.getId = this.getId.bind(this);
    this.id = 0;
}

getId() {
    return this.id++;
}

可以像这样使用：

render() {
    const items = this.props.greetings.map(text => ({
        <li key={this.getId()}>{text}</li>
    }));

    return (
        <ul>
          {items}
        </ul>
    );
}

这很简单，快速，并且没有使用数组索引的问题，但我不知道这种方法是否存在任何问题，或者我忽略了更好的替代方案。这是不好的做法吗？有没有其他简单的方法可以生成没有数组索引问题的key？

Answer 1

这就是Reconciliation上的文档对密钥的说法

在实践中，找到钥匙通常并不难。您要显示的元素可能已经具有唯一ID，因此密钥可以来自您的数据。如果不是这种情况，您可以向模型添加新的ID属性，或者对内容的某些部分进行哈希以生成密钥。关键只需要在其兄弟姐妹中独一无二，而不是全球独一无二。作为最后的手段，您可以将数组中的项目索引作为键传递。如果项目从不重新排序，这可以很好地工作，但重新排序将很慢。

所以我认为你正在遵循建议的方法。

生成ReactJS密钥的顺序ID

1 个答案: