TypeScript 오류: 유형 'ReactNode'에 'children' 속성이 없습니다.

TypeScript 오류: 유형 'ReactNode'에 'children' 속성이 없습니다.

export const PageViewTracker = ({ children }: ReactNode): ReactElement => {

    usePageView();

    return children;
};

문제:

이 함수는 "Property 'children' is not exist on 'ReactNode'" 오류를 반환합니다.

솔루션에 대한 나의 접근법:

여러 가지 시도를 해봤지만 내가 원하는 작품이 아닌 작품만 시도했다.평소에는 어린이 소품용으로 React Node를 사용했는데 잘 작동했어요.이 경우 TypeScript에 문제가 있는 것 같습니다.

반응 > = 18

리액트 18에서는FunctionalComponent인터페이스가 다음과 같이 변경되었습니다.

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

주의:PropsWithChildren타입이 에서 생략되었습니다.propsReact 18 이후의 FunctionalComponent의 유형. 즉, 다음과 같은 요소를 포함해야 합니다.children자신을 지탱하다:

interface Props {
  children: React.ReactNode;
}

export const PageViewTracker: React.FC<Props> = ({ children }) => {
}

그들이 암묵적인 것을 제거한 이유는children여기서 소품을 찾을 수 있습니다(React 18의 유형 정의 릴리스 노트 소스).

그PropsWithChildren타입은 React의 입력 내에서 사용할 수 있습니다.따라서, 필요에 따라서,childrenReact 18 이전 버전과 마찬가지로 다음과 같은 기능을 할 수 있습니다.

import { PropsWithChildren } from 'react';

interface Props {
  foo: string;
}

export const PageViewTracker: React.FC<PropsWithChildren<Props>> = ({ children, foo }) => {
}

의 유형 정의PropsWithChildren다음과 같습니다.

type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

---

반응 <=17

이 에러가 발생하는 이유는 'ReactNode' 인터페이스를 오브젝트에 제공하고 있기 때문입니다.({}: Type).children그 자체는 React Node 유형입니다.

type PropsWithChildren<P> = P & { children?: ReactNode };

PageView를 제공해야 합니다.트래커FunctionComponent(또는 그 별칭)FC)를 입력합니다.

export const PageViewTracker: React.FC = ({ children }) => {
   ...
}

는 다음 인터페이스를 갖추고 있습니다.

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

따라서 디폴트에서는, 이 디바이스는children'ReactNode' 타입의 프로펠러.

주의: 리액션 18.0.0 후에는 각 FC 인터페이스에 하위 항목이 포함됩니다.

interface MyButtonProps {
  color: string;
  children?: React.ReactNode;
}

그러면 옛날처럼 소품만 넘기면 돼요.

const Button:React.FC<MyButtonProps> = (props) => {
    //use children with {props.children} just like before  
}

문서로부터

"@types/react"의 경우: "17.0.43" 또는 18 미만

import { FunctionComponent } from "react";


const BaseLayout: FunctionComponent = ({ children }) => {
  return (
    <>      
    </>
  );
};

export default BaseLayout;

"@types/react" > 18의 경우

interface BaseLayoutProps {
  children?: ReactNode;
}

const BaseLayout: FunctionComponent<BaseLayoutProps> = ({ children }) => {
  return (
    <>          
    </>
  );
};

간단하게 다음과 같이 쓸 수 있습니다.

export const PageViewTracker = ({ children }: {children: ReactNode}): ReactElement => {

    usePageView();

    return children;
};

변경되는 것에 주의해 주세요.({ children }: ReactNode)로.({ children }: {children: ReactNode})

import React from 'react';

interface Props {
  children?: React.ReactNode;
}

export const MenuLateral: React.FC<Props> = ({ children }) => {
  return (
    <>
      
      {children}
    </>
  );
};

Dan이 자신의 트윗 중 하나에서 언급했듯이, "TypeScript 오류는children@types/module을 18.0.0으로 업그레이드하면 다음과 같이 수정됩니다.소품 타입에 React 타입과 함께 일반 소품으로 선언해야 합니다.React Node.

리액트 18

그의 트윗은 이쪽에서 확인하실 수 있습니다.https://twitter.com/dan_abramov/status/1512833611401150474

또는 stackoverflow 스레드: React 18 TypeScript children FC

다음과 같이 시험해 보십시오.

import { ReactNode } from "react";

export const PageViewTracker= ( { children }: {children: ReactNode} ) => {

        usePageView();

        return children;
    };

    

범용 유형 인수에 해당 유형에 주석을 달 수 있습니다.

import React, {ReactNode} from "react";

const Hello: React.FC<{ children: ReactNode }> = ({children}) => {
    return <React.Fragment>
        Hello {children}
    </React.Fragment>;
}

import Navbar from "../Navbar/Navbar";

interface Layout {
  children?: ReactNode;
}

const Layout: React.FC<Layout> = ({ children }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
    </>
  );
};
export default Layout;

언급URL : https://stackoverflow.com/questions/59106742/typescript-error-property-children-does-not-exist-on-type-reactnode