我有一个如下所示的嵌套数组。手风琴应按编号显示。数组,折叠式摘要将包含详细信息‘TITLE’、‘TotalPrice’。而Accordion详细信息将包含‘子内容’、‘字幕’和‘字幕价格’。
let summaryContents: any[] = [
{
Title: "Construction costs",
TotalPrice: "$25000",
Subcontents: [
{
Subtitle: "Sanitation",
SubtitlePrice: "$5000",
},
{
Subtitle: "PoolLights",
SubtitlePrice: "$5000",
},
{
Subtitle: "PoolCleaner",
SubtitlePrice: "$15000",
},
],
},
{
Title: "Pool interior costs",
TotalPrice: "$20000",
Subcontents: [
{
Subtitle: "Title1",
SubtitlePrice: "$5000",
},
{
Subtitle: "Title2",
SubtitlePrice: "$10000",
},
{
Subtitle: "Title3",
SubtitlePrice: "$5000",
},
],
}
我将不得不将这些值作为道具传递给另一个组件。如果它在组件中,我知道我们可以这样做
return (
<>
{summaryContents.map((item: any) => {
<>
{item.Title}
{item.TotalPrice}
{typeof item.Subcontents == "object" ? (
<>
{item.Subcontents.map((subItem: any) => (
<>
{subItem.Subtitle}
{subItem.SubtitlePrice}
</>
))}
</>
) : null}
</>;
})}
</>
);
我们可以做些什么来向它传递另一个组件,如下面给出的
<QuoteSummary
Title={item.Title}
TotalPrice={item.TotalPrice}
Subtitle={item.Subcontents.Subtitle}
SubtitlePrice={item.Subcontents.SubtitlePrice}
/>
嗯,这可能对您有帮助。
// your parent component
return (
<>
{summaryContents.map((item: any) => {
return <QuoteSummary
Title={item.Title}
TotalPrice={item.TotalPrice}
Subcontents={item.Subcontents}
/>
})}
</>
);
// Your child1 component
const QuoteSummary = ({ Title, TotalPrice, Subcontents }) => {
return (
<>
{Title}
{TotalPrice}
{Subcontents.map((item: any) => {
return <SubContent
Subtitle={item.Subtitle}
SubtitlePrice={item.SubtitlePrice}
/>
})}
</>
);
}
// Your child2 component
const SubContent = ({ Subtitle, SubtitlePrice }) => {
return <>
{Subtitle}
{SubtitlePrice}
</>
}