反应中的打字稿错误-类型'Element []'缺少类型'ReactElement <any，any>'中的以下属性答案

【问题标题】：Typescript error in react - Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>'反应中的打字稿错误-类型'Element []'缺少类型'ReactElement <any，any>'中的以下属性
【发布时间】：2022-01-03 03:47:58
【问题描述】：

在App.tsx 中，如果您将鼠标悬停在<Accordion/> 中，您将看到以下错误。

'Accordion' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2786)

我该如何解决这个问题？

App.tsx

import "./styles.css";

import Accordion from "./Accordion";

export default function App() {
  const items = [
    { id: 1, title: "title 1", description: "description 1" },
    { id: 2, title: "title 2", description: "description 2" }
  ];
  return (
    <div className="App">
      <Accordion items={items} />
    </div>
  );
}

手风琴.tsx

import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  Box
} from "@chakra-ui/react";

type AccordionProps = {
  items: Array<{ id: number; title: string; description: string }>;
};

export default function AccordionList({ items }: AccordionProps) {
  return items.map((item) => {
    return (
      <Accordion defaultIndex={[0]} allowMultiple>
        <AccordionItem>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              {item.title}
            </Box>
            <AccordionIcon />
          </AccordionButton>
          <AccordionPanel>{item.description}</AccordionPanel>
        </AccordionItem>
      </Accordion>
    );
  });
}

代码沙盒
https://codesandbox.io/s/determined-ives-lob9x?file=/src/Accordion.tsx:0-734

【问题讨论】：

这能回答你的问题吗？ Type '(props: Props) => Element[]' is not assignable to type 'FunctionComponent<Props>'

标签： reactjs typescript

【解决方案1】：

您应该像这样映射Accordion 中的项目

export default function AccordionList({ items }: AccordionProps) {
  return (
    <Accordion defaultIndex={[0]} allowMultiple>
      {items.map((item) => (
        <AccordionItem>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              {item.title}
            </Box>
            <AccordionIcon />
          </AccordionButton>
          <AccordionPanel>{item.description}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

三箱https://codesandbox.io/s/patient-bush-167ye?file=/src/Accordion.tsx:250-727

【讨论】：

【解决方案2】：

import AccordionList from "./Accordion";

要导入，需要导出

【讨论】：

【解决方案3】：

import React from "react";
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
Box
} from "@chakra-ui/react";

type AccordionProps = {
items: Array<{ id: number; title: string; description: string }>;
};

export default function AccordionList({ items }: AccordionProps) {
return(<> 
{items.map((item, idx) => {
return (
  <Accordion key = {idx} defaultIndex={[0]} allowMultiple>
    <AccordionItem>
      <AccordionButton>
        <Box flex="1" textAlign="left">
          {item.title}
        </Box>
        <AccordionIcon />
      </AccordionButton>
      <AccordionPanel>{item.description}</AccordionPanel>
    </AccordionItem>
  </Accordion>
);
})
}
</>);
}

将您的手风琴代码更改为上述代码。您遇到此错误是因为您从一个函数中发送了多个 JSX 元素。将其包装在片段中是解决此问题的解决方案之一。

【讨论】：