将道具从Reaction中的嵌套数组传递给组件 [英] Passing props to a component from nested array in React

问题描述

我有一个如下所示的嵌套数组。手风琴应按编号显示。数组，折叠式摘要将包含详细信息‘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}
  </>
}

这篇关于将道具从Reaction中的嵌套数组传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！