如何使用 Typescript 將包含組件的對象數組傳遞給 React 中的子組件？

Question

我需要使 Accordion 組件可重復使用。 將來我應該能夠將新的 object 添加到同一個數組 'accordionProps' 並將其傳遞給手風琴。

在這里，我將對象數組“accordionProps”傳遞給組件。 道具類型在與我的數組內容匹配的子組件 Accordion 中定義。

     const accordionProps = [
    {
      title: 'Active Orders',
      body: <OrderModule />,
    },
    {
      title: 'Drivers',
      body: <DriverModule />,
    },
  ];

  return (
    <DashboardWrapper>
      <Accordion title={title} body={body}/>
      <Map />
    </DashboardWrapper>
  );
};

export default Dashboard;

仍然 TypeScript 拋出錯誤：Type '{accordionProps: { title: string; 身體：元素； }[]; }' 不可分配給類型 'IntrinsicAttributes & AccordionProps'。 “IntrinsicAttributes & AccordionProps”類型不存在屬性“accordionProps”。

當我將道具作為 {...accordionProps} 傳遞時，它也不起作用。

這是我的子組件儀表板的樣子：

import { Component } from 'react';

type accordionProps = [
  {
    title: string;
    body: Component;
  },
];

const Accordion = (props: accordionProps) => {
  return (
    <AccordionContainer>
      {props.map(section => (
        <div key={section.title}>
          <div>{section.title})</div>
          <div>{section.body}</div>
        </div>
      ))}
    </AccordionContainer>
  );
};

export default Accordion;

我不明白為什么 TS 不讓我這樣做。

有誰知道在 React 中是否可以實現這樣的抽象？

非常感謝您的幫助。

Answer 1

您將道具類型聲明為一個數組，其中包含一個 object：

type AccordionProps = [
  {
    title: string;
    body: Component;
  },
];

但是，react props 必須是 object：

type AccordionProps = {
  title: string;
  body: Component;
},

---

然后，為了渲染一個項目數組，你需要 map 覆蓋 props 數組，在循環的每次迭代中渲染你想要的組件。

例如，假設您有：

  // declare an array of AccordionProps objects
  const accordionProps: AccordionProps[] = [
    {
      title: 'Active Orders',
      body: <OrderModule />,
    },
    {
      title: 'Drivers',
      body: <DriverModule />,
    },
  ];

然后你可能會像這樣渲染：

<>
  { accordionProps.map(props => <Accordion {...props} />) }
</>