'Element' 형식의 인수는 'ReactElement' 형식의 매개 변수에 할당할 수 없습니다.

'Element' 형식의 인수는 'ReactElement' 형식의 매개 변수에 할당할 수 없습니다.

다음 코드:

import * as React from 'react';                                                                                              
                                                                                 
const Component = () => <div/>;                                                  
                
function culprit<P>(node: React.ReactElement<P>) {
  console.log(node);
}
                                                             
culprit(<Component/>);

...TypeScript를 사용하여 컴파일하면 다음 컴파일 오류가 발생합니다.

오류 TS2345: 유형 'Element'의 인수를 유형 'ReactElement'의 매개 변수에 할당할 수 없습니다.유형 'null'은 유형 'ReactElement'에 할당할 수 없습니다.

이 문제는 strictNullChecks TypeScript 컴파일 플래그가 다음과 같이 설정되어 있는 경우에만 발생합니다.true.

네, 플래그를 비활성화할 수 있지만 컴파일 시간 확인/안전을 위해 플래그를 활성화하고 싶습니다.

마지막 행을 다음과 같이 변경할 경우:

culprit( (<Component/> as React.ReactElement<any>) );

...에 설정된 플래그로 동작합니다.true.

최근 리액트 프로젝트에서 "일반" JavaScript에서 TypeScript로의 이행을 시도했습니다.이 때문에 모든 테스트가 엉망이 되고 있습니다.따라서 테스트 코드에 모든 TypeScript 유형의 어설션을 추가하는 것은 번거로운 일입니다.

이게 버그인가요, 아니면 다른 방법이 없나요?

컴포넌트 또는 컴포넌트 테스트 파일 내에 JSX가 있는 경우,.tsx파일 확장자로 사용합니다.확장자가 .ts여서 코드가 컴파일되지 않았습니다.이름을 바꾼 순간.tsx/jsx잘 작동하기 시작했어!

또한 Typescript를 사용하고 있었기 때문에, 다음의 이름으로 변경했습니다..tsxES6를 사용하고 있는 경우는, 다음의 이름으로 변경해 주세요..jsx.

이는 15.0.5 리액트유형의 정의에 도입된 문제인 것 같습니다.15.0.4로 변경하시면 모든 것이 정상입니다.

다음 문제를 참조하십시오.https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14284

이 문제는 React Fragment 또는 빈 태그의 내부에 JSX를 반환하지 않을 때 발생합니다.

const ErrorMessage: FC<ErrorProps> = (props) => {
    if (!isEmpty(props.errors)) {

        return Object.entries(props.errors).map((item) => (
            <Typography component="span">{item[0]}</Typography>
        ))
    };

    return <></>;
};

빈 태그를 추가하자 모든 것이 예상대로 작동했습니다.

const ErrorMessage: FC<ErrorProps> = (props) => {
    if (!isEmpty(props.errors)) {

        return (
            <>
                {Object.entries(props.errors).map((item) => (
                    <Typography component="span">{item[0]}</Typography>
                ))}
            </>
        )
    };

    return <></>;
};

또한, 만약 우리가 이 버팀목을return <></>스테이트먼트 에러가 표시됩니다.컴포넌트는 제가 쓴 것처럼 항상 올바른 JSX 컴포넌트를 반환해야 합니다.

버전

• 반응: 17.0.2
• @types/filename: 17.0.34
• 타입 스크립트: 4.6.4

언급URL : https://stackoverflow.com/questions/42036992/argument-of-type-element-is-not-assignable-to-parameter-of-type-reactelement