代码之家 › 专栏 › 技术社区 › CCCC

react中的Typescript错误-类型“Element[]”缺少类型“ReactElement<any,any>”中的以下属性

typescript reactjs

CCCC · 技术社区 · 3 年前

在里面 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)

我如何解决这个问题?

应用程序。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

3 回复 | 直到 3 年前

Dhia Djobbi nathan 3 年前

你应该把项目映射到 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

baeksm 3 年前

import AccordionList from "./Accordion";

要进口,就需要出口

lokprakash 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元素。将其包装成一个片段是解决这个问题的解决方案之一。