React开发中如何将嵌套数组数据作为props传递给子组件

你遇到的核心是数据结构和组件入参不匹配：summaryContents中每个条目下的Subcontents是包含多个子项的数组，而你给出的<QuoteSummary>组件默认只接收单个Subtitle和SubtitlePrice值，有两种处理方案：

方案1：调整组件props定义（推荐） #

修改组件的入参规则，让它支持直接接收整个子内容数组，组件内部自己处理子项的渲染逻辑，符合手风琴单个一级条目对应多个子项的交互逻辑：

// 父组件调用代码
{summaryContents.map((item, index) => (
  <QuoteSummary
    key={index}
    Title={item.Title}
    TotalPrice={item.TotalPrice}
    Subcontents={item.Subcontents ?? []} // 直接传递完整子内容数组
  />
))}

你可以直接把之前写的子项遍历逻辑挪到<QuoteSummary>组件内部即可：

// QuoteSummary 组件内部示例
export default function QuoteSummary({ Title, TotalPrice, Subcontents }) {
  return (
    <>
      {/* 手风琴摘要部分 */}
      <div className="summary">
        <span>{Title}</span>
        <span>{TotalPrice}</span>
      </div>
      {/* 手风琴详情部分 */}
      <div className="detail">
        {Subcontents.map((subItem, subIndex) => (
          <div key={subIndex}>
            <span>{subItem.Subtitle}</span>
            <span>{subItem.SubtitlePrice}</span>
          </div>
        ))}
      </div>
    </>
  )
}

方案2：不修改组件，遍历子项逐个渲染 #

如果无法修改<QuoteSummary>的props定义，就遍历每个子项，把父级的公共参数和子项的参数组合传入即可：

{summaryContents.map((item, index) => (
  <React.Fragment key={index}>
    {item.Subcontents?.map((subItem, subIndex) => (
      <QuoteSummary
        key={subIndex}
        Title={item.Title}
        TotalPrice={item.TotalPrice}
        Subtitle={subItem.Subtitle}
        SubtitlePrice={subItem.SubtitlePrice}
      />
    ))}
  </React.Fragment>
))}

注：该方案会把同一个一级条目的Title、TotalPrice重复渲染多次，仅适合每个子项单独对应一个手风琴条目的场景

内容的提问来源于stack exchange，提问作者joekevinrayan96