reactjs - 从数据数组渲染 MUI 组件并以不同方式显示第一个组件
问题描述
在这里,我试图Accordion
通过将道具传递给组件的列表数组来呈现内容。我有点理解问题出在哪里,但我不知道我还能如何调用组件并传递道具。下面是我的代码。
父组件的代码
const Sandbox = () => {
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",
},
],
},
];
let summaryContentsList: any[] = [];
summaryContents.forEach((item: any, index: number) => {
summaryContentsList.push(
<QuoteSummary
Title={item.Title}
TotalPrice={item.TotalPrice}
Subtitle={item.Subcontents.Subtitle}
SubtitlePrice={item.Subcontents.SubtitlePrice}
/>
);
});
return (
<>
{summaryContentsList}
</>
);
};
子组件的代码
const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
const classes = useStyles();
return (
<QuoteCard>
<Typography variant="h1" sx={{ paddingBottom: 2 }}>
Quote Summary
</Typography>
<DialogCloseButton onClose={clicked} />
<Accordion
className={classes.accordion}
sx={{
paddingTop: 0,
}}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography variant="h3">{props.Title}</Typography>
<Typography variant="h3" sx={{ paddingLeft: 10 }}>
{props.TotalPrice}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>{props.Subtitle}</Typography>
<Typography>{props.SubtitlePrice}</Typography>
</AccordionDetails>
</Accordion>
</QuoteCard>
);
};
这就是它的外观,因为我只想渲染一次标题和下面的手风琴内容。我必须遵循的方法是什么
解决方案
您可以在子组件中QuoteCard
放置外部且仅放置项目:Accordion
const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
return (
<Accordion>
{...}
</Accordion>
);
};
<QuoteCard>
<Typography variant="h6" sx={{ paddingBottom: 2 }}>
Quote Summary
</Typography>
<DialogCloseButton onClose={() => {}} />
{summaryContents.map((item) => (
<QuoteSummary
Title={item.Title}
TotalPrice={item.TotalPrice}
Subtitle={item.Subcontents.Subtitle}
SubtitlePrice={item.Subcontents.SubtitlePrice}
/>
))}
</QuoteCard>
编辑:另一种方法是根据父级提供的道具有条件地在子组件中呈现标题:
const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
return (
<QuoteCard>
{props.displayTitle && (
<Typography variant="h6" sx={{ paddingBottom: 2 }}>
Quote Summary
</Typography>
)}
<DialogCloseButton onClose={() => {}} />
<Accordion>
{...}
</Accordion>
</QuoteCard>
);
};
<>
{summaryContents.map((item, i) => (
<QuoteSummary
displayTitle={i === 0}
Title={item.Title}
TotalPrice={item.TotalPrice}
Subtitle={item.Subcontents.Subtitle}
SubtitlePrice={item.Subcontents.SubtitlePrice}
/>
))}
</>
推荐阅读
- c++ - Cocos2d-x :如何改变多槽上的纹理
- ios - CloudKit,重新安装应用程序后,如何将我的订阅重置为当前记录状态?
- python - 如果项目不在列表中,则输出“未找到”
- html - 使用 C 的 HTTP 响应中的图像?
- iphone - 无需付费苹果开发者账号即可生成ipa
- c++ - 使用静态或全局对象初始化共享指针
- docker-compose - 这些属性在 Fabric docker 镜像中意味着什么?
- android - 运行模拟器时出错:没有足够的磁盘空间来运行 AVD
- java - 我可以使用 KeyListener 更改变量吗?
- python-3.x - 尽管安装了帮助程序,但导入帮助程序库时出错