[reactjs] TypeScript 및 React-어린이 유형?

다음과 같이 매우 간단한 기능 구성 요소가 있습니다.

import * as React from 'react';

export interface AuxProps  {
    children: React.ReactNode
 }


const aux = (props: AuxProps) => props.children;

export default aux;

그리고 또 다른 구성 요소 :

import * as React from "react";

export interface LayoutProps  {
   children: React.ReactNode
}

const layout = (props: LayoutProps) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {props.children}
        </main>
    <Aux/>
);

export default layout;

다음과 같은 오류가 계속 발생합니다.

[ts] JSX 요소 유형 ‘ReactNode’는 JSX 요소에 대한 생성자 함수가 아닙니다. ‘undefined’유형은 ‘ElementClass’유형에 할당 할 수 없습니다. [2605]

올바르게 입력하려면 어떻게합니까?

답변

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

const aux: React.FC<AuxProps> = props =>
  <>{props.children}</>;

interface Props {
  children: JSX.Element[] | JSX.Element
}

const MyComponent: React.FunctionComponent = (props) => {
    return props.children;
}

import React, { ReactChildren, ReactChild } from 'react';

interface AuxProps {
  children: ReactChild | ReactChildren;
}

const Aux = ({ children }: AuxProps) => (<div>{children}</div>);

export default Aux;

const Aux = (props: AuxProps) => <>props.children</>;
const Aux2 = (props: AuxProps) => props.children as ReactElement; 

interface AuxProps {
  children: ReactElement | ReactElement[]
}