如何为React函数组件动态生成适配组件顺序的唯一ID？

这个需求完全可以实现，你当前的写法问题在于直接将JSX组件实例存入数组，无法灵活适配动态增删、ID动态分配的场景，调整为元数据驱动渲染的思路即可解决：

核心实现逻辑 #

1. 不要在Redux中存储组件实例，改为存储组件的元数据，每条元数据包含唯一ID、组件类型、组件配置参数三个核心字段，参考结构如下：

// Redux中存储的样式组件数组示例
const styleComponents = [
  {
    id: crypto.randomUUID(), // 唯一ID，也可以用自定义的自增函数生成
    type: "Transform",
    config: {} // 存储对应组件的自定义样式参数
  },
  {
    id: crypto.randomUUID(),
    type: "BorderRadius",
    config: {}
  }
]

注：不要使用数组索引作为ID，增删操作会导致索引变动，引发数据匹配错误。如果需要兼容低版本浏览器，也可以用Date.now() + Math.random()的方式生成简单唯一ID

2. 建立组件类型与实际组件的映射表，后续新增组件只需要更新该映射表即可：

import Transform from './components/Transform'
import BorderRadius from './components/BorderRadius'
import BoxShadow from './components/BoxShadow'

const componentMap = {
  Transform,
  BorderRadius,
  BoxShadow
  // 新增组件在此处添加映射即可
}

3. 渲染时遍历Redux中的元数据数组，动态生成对应组件：

const renderComponents = styleComponents.map(item => {
  const CurrentComponent = componentMap[item.type]
  return <CurrentComponent key={item.id} id={item.id} config={item.config} />
})

对应操作的处理方式 #

• 新增组件：向Redux的styleComponents数组中推入一条新的元数据，ID使用生成好的唯一值即可
• 删除组件：通过styleComponents.filter(item => item.id !== 待删除组件ID)更新Redux数组即可
• 更新组件参数：按ID匹配到对应元数据，修改config字段后更新Redux数组即可

你原来的写法是把组件写死在数组里，自然没办法适配动态变化的场景，把数据层和视图层拆分后，不管是组件增删、参数修改还是ID匹配的需求都能很好的满足。

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