从数据数组渲染 MUI 组件并以不同方式显示第一个组件

Question

在这里，我试图通过将道具传递给组件的列表数组来呈现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>
  );
};

这就是它的外观，因为我只想渲染一次标题和下面的手风琴内容。 我必须遵循的方法是什么

Answer 1

你可以把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}
    />
  ))}
</>

Answer 2

您可以为数组项创建一个渲染函数并像这样使用它们：

const Sandbox = () => {
  const 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",
        },
      ],
    },
  ];

  const renderContent = (item: any) => (
     <QuoteSummary
        Title={item.Title}
        TotalPrice={item.TotalPrice}
        Subtitle={item.Subcontents.Subtitle}
        SubtitlePrice={item.Subcontents.SubtitlePrice}
      />
  );

  return (
    <>
      {summaryContents.map(renderContent)}
    </>
  );
};