React：在数组映射的组件中传递 Props 的正确方法-js教程-PHP中文网

React：在数组映射的组件中传递 Props 的正确方法

霞舞

发布： 2025-07-21 17:38:48

原创

623人浏览过

react：在数组映射的组件中传递 props 的正确方法

本文旨在解决在 React 中，当组件通过数组映射渲染时，如何向这些组件传递 Props 的问题。通过将组件的渲染逻辑封装在函数中，并利用函数传参的方式，我们可以轻松地将所需的 Props 传递给动态生成的组件，实现灵活的样式和功能定制。

在 React 开发中，经常会遇到需要根据数据动态渲染组件的情况。如果这些组件存储在数组中，并在渲染时进行映射，那么如何向这些动态生成的组件传递 Props 就成了一个常见问题。以下提供一种简洁有效的解决方案。

核心思路：使用渲染函数

关键在于将每个对象中的 icon 属性从直接存储组件实例，改为存储一个渲染函数。这个渲染函数接收 Props 作为参数，并返回组件实例。

具体实现步骤

修改数据结构：

将 fruitsArray 中的 icon 属性替换为 render 属性，其值为一个函数，该函数接收 Props 作为参数，并返回对应的组件实例。例如：

   // necessary icon imports
   import AppleIcon from "../assets/fruitIcons/AppleIcon";
   import BananaIcon from "../assets/fruitIcons/BananaIcon";
   import KiwiIcon from "../assets/fruitIcons/KiwiIcon";

   export const fruitsArray = [
     {
       id: "fruit",
       title: "Apple",
       value: "apple",
       type: "checkbox",
       render: (className) => <AppleIcon className={className} />,
     },
     {
       id: "fruit",
       title: "Banana",
       value: "banana",
       type: "checkbox",
       render: (className) => <BananaIcon className={className} />,
     },
     {
       id: "fruit",
       title: "Kiwi",
       value: "kiwi",
       type: "checkbox",
       render: (className) => <KiwiIcon className={className} />,
     },
   ];

登录后复制

注意，这里使用了箭头函数，它接收 className 作为参数，并返回 <AppleIcon className={className} /> 组件实例。

FaceSwapper

FaceSwapper是一款AI在线换脸工具，可以让用户在照片和视频中无缝交换面孔。

729

查看详情

修改渲染逻辑：

在 Fruits 组件中，修改 fruitsArray.map 的回调函数，调用 icon.render() 函数，并传入所需的 Props。例如：

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

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

     return (
       <>
         <ul>
           {fruitsArray.map((icon) => (
             <li key={icon.title}>{icon.render(className)}</li>
           ))}
         </ul>
       </>
     );
   }

登录后复制

这里，icon.render(className) 调用了之前定义的渲染函数，并将 className 传递给它。渲染函数会返回带有正确 Props 的组件实例。

完整示例

// components/Fruits.js
import { fruitsArray } from "../arrays/fruitsArray";

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

  return (
    <>
      <ul>
        {fruitsArray.map((icon) => (
          <li key={icon.title}>{icon.render(className)}</li>
        ))}
      </ul>
    </>
  );
}

// arrays/fruitsArray.js
import AppleIcon from "../assets/fruitIcons/AppleIcon";
import BananaIcon from "../assets/fruitIcons/BananaIcon";
import KiwiIcon from "../assets/fruitIcons/KiwiIcon";

export const fruitsArray = [
  {
    id: "fruit",
    title: "Apple",
    value: "apple",
    type: "checkbox",
    render: (className) => <AppleIcon className={className} />,
  },
  {
    id: "fruit",
    title: "Banana",
    value: "banana",
    type: "checkbox",
    render: (className) => <BananaIcon className={className} />,
  },
  {
    id: "fruit",
    title: "Kiwi",
    value: "kiwi",
    type: "checkbox",
    render: (className) => <KiwiIcon className={className} />,
  },
];

登录后复制

注意事项