React 中如何向组件数组遍历得到的组件传递额外 prop

你可以使用React内置的React.cloneElement API实现需求，该接口可以基于已有的组件实例克隆生成新的组件，新增的prop会和原有prop合并，重名prop会被新传入的值覆盖。

修改后的遍历代码如下：

import React from 'react'
// 其他依赖引入省略

my_array.map((AComponent, index) => {
  // 第二个参数即为要追加的额外prop对象
  const ClonedComponent = React.cloneElement(AComponent, {
    // 按需添加你要传递的prop即可
    customProp: '自定义值',
    disabled: false
  })

  return (
    <View key={index}>
      {ClonedComponent}
    </View>
  )
})

注意事项 #

• 遍历返回的列表节点需要添加唯一key属性，避免React抛出渲染警告，若数组没有固定唯一标识，且没有动态增删数组元素的需求，可以直接使用遍历下标作为key
• 如果你传入的新prop和组件原有prop重名，原有prop会被新值覆盖，不需要覆盖的场景请避免prop命名冲突

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