속성이 'IntrinsicAttributes & {children?' 유형에 없습니다.ReactNode; }'

속성이 'IntrinsicAttributes & {children?' 유형에 없습니다.ReactNode; }'

내가 만든 반응 프로젝트가 있습니다.Create-React-App다음 패키지 있음(내 문제와 관련된 패키지 포함):

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"typescript": "^3.9.2",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0"

저는 다음과 같은 간단한 HOC(지금은 아무것도 하지 않지만 나중에 논리를 추가하겠습니다)를 만들었습니다.

type Props = {
    [key: string]: any;
};


const connect = function (Component: FunctionComponent): FunctionComponent {
    const ComponentWrapper = function (props: Props): ReactElement {
        return <Component {...props} />;
    };

    return ComponentWrapper;
};

그리고 다음과 같이 내 구성요소를 내보냈습니다.

    const Test: FunctionComponent<Props> = function ({ message }: Props) {
        return (
            <div>{message}</div>
        );
    };


export default connect(Test);

이 구성 요소를 다음과 같이 사용합니다.

<Test message="Testing message" />

그러나 컴파일러에서 오류가 발생합니다.

Type '{ message: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'message' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.  TS2322

구글에서 발견된 다른 유사한 스택 오버플로 질문과 기사에서 사람들이 제안한 것을 시도해 보았지만, 아직까지 아무 것도 작동하지 않았습니다.

// This is the piece we were missing --------------------v
const connect = function (Component: React.FC): React.FC<Props> {
    const ComponentWrapper = function (props: Props): JSX.Element {
        return <Component {...props} />;
    };

    return ComponentWrapper;
};

그리고 컴파일러를 다시 시작한 후에는 잘 작동합니다.

의 반환 값 유형connect기능은 다음을 필요로 하는 기능적 구성 요소입니다.Props기능적인 구성 요소가 아닙니다.

부정행위 시트 참조

상위 구성 요소의 문제가 아닙니다.이것은 아이 구성 요소의 문제입니다.하위 구성요소에 소품을 정의하기만 하면 상위 구성요소에서 이 오류가 사라집니다.

상위: <하위 구성 요소 {...props} />

그러나 하위 구성요소에서도 다음과 같이 정의합니다.

하위: 기본 함수 내보내기로딩(props) {

언급URL : https://stackoverflow.com/questions/61853338/property-does-not-exist-on-type-intrinsicattributes-children-reactnode