'Element[]' 형식에는 'Element' 형식에서 다음 속성이 없습니다. 유형, 소품, 키

'Element[]' 형식에는 'Element' 형식에서 다음 속성이 없습니다. 유형, 소품, 키

Typescript 및 React 환경에서 표준 화살표 맵 ES7 기능이 있습니다.

 const getItemList: Function = (groups: any[]): JSX.Element => 
  group.map((item: any, i: number) => {
    const itemCardElemProps = { handleEvents: () => {}, ...item}
    return <Item key={`${item.id}_${i}`} {...itemCardElemProps} />
  })

다음 오류가 나타납니다.

TS2739: Type 'Element[]' is missing the following properties from type 'Element': type, props, key

버전: 타입스크립트 3.5.3

언제든지 JSX 하나만 돌려보낼 수 있습니다.요소도 fragment화:

interface IOptions {
   options: string[]
}

const CardArray: React.FC<IOptions> = ({ options }) => {
   return <>{options.map(opt => opt)}</>
}

이렇게 하면 반환된 유형을 일치시킬 수 있으며 마크업에는 영향을 주지 않습니다.

오류를 수정하려면 다음에서 함수 출력 유형을 변경해야 합니다.JSX.Element로.React.ReactElement[]또는JSX.Element[]다음과 같습니다.

 const getItemList: Function = (groups: any[]): React.ReactElement[] => 
  groups.map((item: any, i: number) => {
    const itemCardElemProps = { key: item.id, handleEvents: () => {}, ...item}
    return <Item {...itemCardElemProps} />
  })

또는 에서 다시 쓸 수 있습니다.interface스타일:

interface IGetItemList {
  (groups: any[]): React.ReactElement[] // or JSX.Element[]
}

const getItemList: IGetItemList = groups =>
  groups.map((item: any, i: number) => {
    const itemCardElemProps = { key: item.id, handleEvents: () => {}, ...item }
    return <Item {...itemCardElemProps} />
  })

@로마 뭔가 바뀐 게 틀림없어, 나한텐 안 돼.

코드:

const CardArray = (props: Items): JSX.Element[] => {
    return props.items.map((item) => <Item data={item} />);
};

export default CardArray;

에러:

JSX element type 'Element[]' is not a constructor function for JSX elements.
Type 'Element[]' is missing the following properties from type 'Element': type, props, key

edit: 신경 쓰지 마세요.저는 함수 타입을 함수에 추가해야 했습니다.좀 바보같다고 할 수 있죠

효과적이었던 점:

const CardArray: Function = (props: Items): JSX.Element[] => {
    return props.items.map((item) => <Item data={item} />);
};

JSX를 상속하기 때문에 오류가 발생하였습니다.요소입니다만, .ts 파일 확장자를 사용하고 있었습니다..tsx 파일 확장자를 사용하면 문제가 해결됩니다.

저는 이 오류와 관련하여 다른 사람에게 일어날 수 있는 문제가 있었습니다.TS는 처음이라 사용하는 나쁜 버릇이 있습니다.[그리고.]반환 JSX를 열고 닫습니다.TS가 허락하지 않는 것을 방금 알았습니다.따라서 이러한 대체 방법은( )

JSX의 함수 출력 유형을 변경해야 합니다.요소에서 ReactNode[]로의 연결:

import { ReactNode } from 'react'

const getItemList: Function = (groups: any[]): ReactNode[] => 
    groups.map((item: any, i: number) => {
    const itemCardElemProps = { key: item.id, handleEvents: () => {}, 
     ...item}
    return <Item {...itemCardElemProps} />
})

언급URL : https://stackoverflow.com/questions/58311442/type-element-is-missing-the-following-properties-from-type-element-type