本文旨在解决在 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 作为参数，并返回
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
- 修改渲染逻辑：
在 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} />,
},
];注意事项
- key 属性应该使用具有唯一性的属性，例如 icon.title，而不是 icon 对象本身。
- 可以根据需要传递多个 Props 给渲染函数。
- 这种方法适用于任何类型的组件，不仅仅是 Icon 组件。
总结
通过使用渲染函数，我们可以灵活地向通过数组映射生成的 React 组件传递 Props。这种方法代码简洁易懂，易于维护，是处理动态组件渲染的有效方案。这种模式使得组件的样式和行为可以根据数据进行定制，提高了代码的灵活性和可重用性。
