如何向数组中的React组件传递props？

当前实现的问题分析 #

你当前的代码能渲染图标但没有样式，核心原因有两个：

1. fruitsArray中存储的是已经实例化的组件元素（比如<AppleIcon />），这类元素一旦创建就无法再动态传入新的props；
2. map循环中使用整个icon对象作为key，这不符合React的key规范（key需要是稳定、唯一的字符串/数字），可能引发渲染异常。

解决方案1：修改数组存储组件引用（推荐） #

把数组里的icon字段改成组件的引用（而非实例），在映射时动态渲染组件并传递props。

步骤1：修改fruitsArray结构

// 导入图标组件
import AppleIcon from "../assets/fruitIcons/AppleIcon";
import BananaIcon from "../assets/fruitIcons/BananaIcon";
import KiwiIcon from "../assets/fruitIcons/KiwiIcon";

export const fruitsArray = [
  {
    id: "apple-icon", // 设置唯一ID作为key
    title: "Apple",
    value: "apple",
    type: "checkbox",
    icon: AppleIcon, // 存储组件本身，不是<AppleIcon />实例
  },
  {
    id: "banana-icon",
    title: "Banana",
    value: "banana",
    type: "checkbox",
    icon: BananaIcon,
  },
  {
    id: "kiwi-icon",
    title: "Kiwi",
    value: "kiwi",
    type: "checkbox",
    icon: KiwiIcon,
  }
]

步骤2：修改渲染逻辑

import { fruitsArray } from "../arrays/fruitsArray";

export default function Fruits() {
  const className = "w-10 h-10 fill-current text-orange-700";

  return (
    <>
      <ul>
        {fruitsArray.map((item) => {
          // 将组件引用赋值给变量（首字母大写符合React组件命名规范）
          const IconComponent = item.icon;
          return (
            <li key={item.id}>
              {/* 动态渲染组件并传递className props */}
              <IconComponent className={className} />
            </li>
          );
        })}
      </ul>
    </>
  );
}

解决方案2：用React.cloneElement克隆组件并添加props #

如果不想修改原数组结构，可以使用React.cloneElement克隆已有的组件实例，同时注入新的props。

import React from 'react';
import { fruitsArray } from "../arrays/fruitsArray";

export default function Fruits() {
  const className = "w-10 h-10 fill-current text-orange-700";

  return (
    <>
      <ul>
        {fruitsArray.map((item) => (
          <li key={item.value}>
            {/* 克隆组件实例并传入className */}
            {React.cloneElement(item.icon, { className })}
          </li>
        ))}
      </ul>
    </>
  );
}

关于实现思路的总结 #

原思路的方向是对的（用数组统一管理图标配置，通过映射批量渲染），但细节处理有误：

• 不应在数组中提前实例化组件，否则丧失动态传参的灵活性；
• 必须使用稳定、唯一的标识作为key，避免React渲染优化出现问题。

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