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

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

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

核心思路：使用渲染函数

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

具体实现步骤

1. 修改数据结构：

将 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) => ,
     },
     {
       id: "fruit",
       title: "Banana",
       value: "banana",
       type: "checkbox",
       render: (className) => ,
     },
     {
       id: "fruit",
       title: "Kiwi",
       value: "kiwi",
       type: "checkbox",
       render: (className) => ,
     },
   ];

注意，这里使用了箭头函数，它接收 className 作为参数，并返回 组件实例。

喵记多

喵记多 - 自带助理的 AI 笔记

下载

2. 修改渲染逻辑：

在 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 (
       <>
         

           {fruitsArray.map((icon) => (
             
{icon.render(className)}
           ))}
         
       
     );
   }

这里，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 (
    <>
      

        {fruitsArray.map((icon) => (
          
{icon.render(className)}
        ))}
      
    
  );
}

// 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) => ,
  },
  {
    id: "fruit",
    title: "Banana",
    value: "banana",
    type: "checkbox",
    render: (className) => ,
  },
  {
    id: "fruit",
    title: "Kiwi",
    value: "kiwi",
    type: "checkbox",
    render: (className) => ,
  },
];

注意事项

• key 属性应该使用具有唯一性的属性，例如 icon.title，而不是 icon 对象本身。
• 可以根据需要传递多个 Props 给渲染函数。
• 这种方法适用于任何类型的组件，不仅仅是 Icon 组件。

总结

通过使用渲染函数，我们可以灵活地向通过数组映射生成的 React 组件传递 Props。这种方法代码简洁易懂，易于维护，是处理动态组件渲染的有效方案。这种模式使得组件的样式和行为可以根据数据进行定制，提高了代码的灵活性和可重用性。