我在父组件中有一个值'name'的数组，我想根据从具有相同值'name'的数组的匹配值来呈现子组件中的项。就像当用户单击父组件中的项时，它应该基于子组件数组中项的onClicked值来呈现值。我希望我讲清楚了。
这是父组件:
import React, { useState } from "react";
import Icon from "../../../components/ui/Icon";
import Card from "@/components/ui/Card";
import Products from "../../../components/partials/widget/products";
import SelectMonth from "@/components/partials/SelectMonth";
const BillsTopups = () => {
const [selectedItem, setSelectedItem] = useState(null);
const templateData = [
{
title: "Saved Templates",
description: "Payments that you made most frequently",
icon: "material-symbols:add-circle",
name: "template,",
},
{
title: "Mobile Networks",
description: "Payments that you made most frequently and Instantly",
icon: "material-symbols:add-circle",
name: "network,",
},
{
title: "Utilities",
description: "Check your home utility bulls and pay them",
icon: "material-symbols:delete",
name: "utilities,",
},
{
title: "Mobile Networks",
description: "Payments that you made most frequently and Instantly",
icon: "material-symbols:add-circle",
name: "network,",
},
{
title: "Utilities",
description: "Check your home utility bulls and pay them",
icon: "material-symbols:delete",
name: "bills,",
},
];
const handleItemClick = (item) => {
setSelectedItem(item);
};
return (
<div className="grid grid-cols-12 gap-5 mt-5">
<Card
title="Select Services"
className="lg:col-span-6 xl:col-span-6 2xl:col-span-6 col-span-12 space-y-1 h-full w-full"
>
<div className="rounded-lg bg-white">
{templateData.map((item, index) => (
<>
<div
key={index}
className="bg-no-repeat bg-cover bg-center p-4 rounded-[6px] relative cursor-pointer hover:bg-black-200 transform hover:scale-105 "
onClick={() => handleItemClick(item)}
>
<div className="max-w-[180px]">
<h4 className="text-base font-medium text-slate-800 mb-2 ">
{item.title}
</h4>
<p className="text-xs text-slate-800 text-opacity-80">
{item.description}
</p>
</div>
<div className="absolute top-1/2 -translate-y-1/2 ltr:right-6 rtl:left-6 mt-2 h-12 w-12 bg-slate-200 rounded-full text-xs font-medium flex flex-col items-center justify-center">
<span className="text-3xl text-slate-800">
<Icon icon={item.icon} />
</span>
</div>
</div>
<hr className="w-4/5 mx-auto border border-gray-200 dark:border-gray-600 my-0" />
</>
))}
</div>
</Card>
<div className="lg:col-span-6 xl:col-span-6 2xl:col-span-6 col-span-12 space-y-5 h-full w-full rounded-lg">
<Card title="Saved Templates" headerslot={<SelectMonth />}>
<Products selectedItem={selectedItem} />
</Card>
</div>
</div>
);
};
export default BillsTopups;
及以下是我的子组件:
import React from "react";
const Products = ({ selectedItem }) => {
const services = [
{
img: "https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/amazon-512.png",
price: "$150.00",
title: "Car engine oil",
name: "template",
},
{
img: "https://cdn0.iconfinder.com/data/icons/internet-2020/1080/Applemusicandroid-512.png",
price: "$150.00",
title: "Car engine oil",
name: "bills",
},
{
img: "https://external-preview.redd.it/o8kVY3bH8eg0xdABo5jp3zhColLY_gcYCpOoR6gy1sU.jpg?auto=webp&s=1c0c075f0b1c314e61a932d5a5319e31ddf2efbe",
price: "$150.00",
title: "Car engine oil",
name: "template",
},
{
img: "https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/ovcsxjuvmzshxivkwa6y",
price: "$150.00",
title: "Car engine oil",
name: "network",
},
{
img: "https://cdn-icons-png.flaticon.com/512/3670/3670174.png",
price: "$150.00",
title: "Car engine oil",
name: "template",
},
{
img: "https://w7.pngwing.com/pngs/779/408/png-transparent-airbnb-circle-round-icon-travel-popular-services-brands-vol-icon.png",
price: "$150.00",
title: "Car engine oil",
name: "utilities",
},
{
img: "https://external-preview.redd.it/o8kVY3bH8eg0xdABo5jp3zhColLY_gcYCpOoR6gy1sU.jpg?auto=webp&s=1c0c075f0b1c314e61a932d5a5319e31ddf2efbe",
price: "$150.00",
title: "Car engine oil",
name: "utilities",
},
{
img: "https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/amazon-512.png",
price: "$150.00",
title: "Car engine oil",
name: "bills",
},
{
img: "https://cdn0.iconfinder.com/data/icons/internet-2020/1080/Applemusicandroid-512.png",
price: "$150.00",
title: "Car engine oil",
name: "network",
},
];
const filteredItems = services.filter(
(item) => item.name === selectedItem?.name
);
cl
return (
<div className="grid md:grid-cols-3 grid-cols-1 gap-5 ">
{filteredItems.map((item, i) => (
<div
key={i}
className="bg-slate-50 dark:bg-slate-900 p-4 rounded text-center cursor-pointer group"
>
<div className="h-12 w-12 mb-4 mx-auto relative rounded-full">
<img
src={item.img}
alt=""
className="w-full h-full rounded-full group-hover:scale-110 transition-all duration-300 bg-purple-200"
/>
</div>
<span className="text-slate-900 dark:text-slate-300 text-sm mb-2 block font-medium">
{item.title}
</span>
<span className="text-pink-600 dark:text-pink-600 text-sm mb-1 block font-normal bg-pink-200 p-1">
{item.price}
</span>
</div>
))}
</div>
);
};
export default Products;
我的错，我不小心在父组件数组中的name变量的每个值后面添加了逗号。