如何使用 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} />) }
</>