React Native中为函数式调用的子组件添加key的正确重构方式

你有两种可行的方式为函数调用生成的组件添加key：

方式一：用容器组件包裹函数调用结果 #

无法直接给函数调用返回的JSX添加key，可以用React.Fragment（或普通View）将函数调用包裹，再给容器添加key：

<View>
  {objects.map((wc, index) => (
    <React.Fragment key={index}>
      {MyChildComponent(wc, index)}
    </React.Fragment>
  ))}
</View>

注意：不能用<>这种短语法Fragment，因为短语法不支持添加key属性。

方式二：改为组件标签形式（推荐） #

React函数组件更推荐以标签形式使用，同时将原函数的参数转为props传递，这样可以直接给组件标签加key：

第一步：调整MyChildComponent的定义，改为接收props对象 #

如果原组件是按参数接收值，改成解构props：

// 原组件定义（函数参数形式）
function MyChildComponent(wc, index) {
  // ...组件逻辑
}

// 改为props形式
function MyChildComponent({ item, index }) {
  // ...组件逻辑，用item代替原来的wc
}

第二步：在map中以标签形式调用组件并添加key #

<View>
  {objects.map((wc, index) => (
    <MyChildComponent 
      key={index} 
      item={wc} 
      index={index} 
    />
  ))}
</View>

注意事项 #

尽量不要用index作为key，如果你的列表元素有唯一标识（比如wc.id），优先使用这个唯一值作为key，避免因列表排序、增删导致的组件状态异常或性能问题。

内容的提问来源于stack exchange，提问作者user1052610