时间戳

首页 > 解决方案 > 在反应关键道具被剥离

javascript - 在反应关键道具被剥离

问题描述

我正在生成一个 TSX 元素列表：

    this.productsModel = this.state.products.map(o => (
            <Grid.Column key>

但是，反应警告我：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

因此，根据推荐的做法 [1]，我添加：

    this.productsModel = this.state.products.map((o, i) => (
            <Grid.Column key={i}>

但是key={i}在渲染时被剥离，无论元素是什么（Grid.Column等div）。怎么会？如何解决这个问题？

[1] https://reactjs.org/docs/lists-and-keys.html#keys

标签： javascriptreactjs

解决方案

key 元素不应该被传递给 DOM，它是一个保留的 props 仅用于 React 优化

所以当你添加像

  this.productsModel = this.state.products.map((o, i) => (
        <Grid.Column key={i}>

键甚至没有传递给 Grid.Column 组件，而是在实际传递所有道具时被读取剥离

您还需要为从 map 函数中返回的元素提供唯一键

为 react 提供了键来跟踪正在呈现的元素，因此如果删除了一个元素或对列表进行了排序，它不需要重新挂载所有内容，而是在其虚拟 DOM 比较期间比较正确的元素。通过这种方式，它实际上提高了性能

即使删除了警告，使用索引和键也不会提供太多好处。最好使用 products 数组中每个产品对象的唯一 ID 作为键

推荐阅读