从 React 中的嵌套数组将道具传递给组件

Question

我有一个嵌套数组，如下所示。手风琴应按编号显示。我拥有的数组和手风琴摘要将包含详细信息“标题”、“总价格”。而手风琴详细信息将包含“subcontents”、“Subtitle”和“SubtitlePrice”。

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}
/>

Answer 1

嗯，这可能会对你有所帮助。

// 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}
  </>
}