'어린이' 소품의 종류는 무엇입니까?

'어린이' 소품의 종류는 무엇입니까?

다음과 같은 매우 간단한 기능 컴포넌트가 있습니다.

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]

이거 어떻게 치죠?

★★★★★★★★★★★★★★★★★.children: React.ReactNode.

「 」를 하려면 , 「 」를 합니다.<Aux>에서는, 「JSX」 「」를여야 합니다.ReactElement<any> | null이것이 함수 컴포넌트의 정의입니다.

는 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아React.ReactNode훨씬 더 넓은 타입입니다.반응:

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

FragmentRespect Fragment)로합니다.<></>

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

하시면 됩니다.ReactChildren ★★★★★★★★★★★★★★★★★」ReactChild:

import React, { ReactChildren, ReactChild } from 'react';
 
interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

요소의 플랫 배열을 통과해야 하는 경우:

interface AuxProps {
  children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}

이 경우에도 하실 수 있습니다.React.PropsWithChildren<P>.

type ComponentWithChildProps = React.PropsWithChildren<{example?: string}>;

이것이 나에게 효과가 있었다.

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

권장하는 편집children: React.ReactNode대신 지금 당장.

A React Node종류는 .

• Boolean (무시됩니다)
• null ★★★★★★★★★★★★★★★★★」undefined (무시됩니다)
• Number
• String
• A React element의 )JSX)
• 위의 배열 중 하나(내스트된 배열일 수 있음)

import { ReactNode, FC } from 'react'

type Props = { children: ReactNode }

const App: FC<Props> = ({children}) => (<div>{children}</div>)

다음과 같이 컴포넌트를 선언할 수 있습니다.

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

은 '돌아가다'로 됩니다.JSXElement | nullTypeScript에 있습니다.이는 현재 유형의 제한이며, pure React는 더 많은 리턴 유형을 허용합니다.

최소한의 데모 스니펫

회피책으로서 타입 아사션 또는 프래그먼트를 사용할 수 있습니다.

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

---

ReactNode

children: React.ReactNode에 대한 강력한 유형을 갖는 것이 목표라면 차선책이 될 수 있습니다.Aux.

현재에는 거의 모든 것을 할당할 수 있습니다.ReactNode에하는 유형입니다.{} | undefined | null고객님의 경우 보다 안전한 유형은 다음과 같습니다.

interface AuxProps {
  children: ReactElement | ReactElement[]
}

예:

의 「」Aux과 같은 요소가 합니다.children로 가 string그러면 위의 솔루션은 링크된 놀이터를 보는 것과 대조적으로 오류를 일으킬 수 있습니다.

된 ★★children또한 Render Prop 콜백과 같은 JSX 이외의 소품에도 유용합니다.

다음을 사용하고 있습니다.

type Props = { children: React.ReactNode };

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

export default MyComponent;

모든 유형을 찾는 일반적인 방법은 예입니다.타이프 스크립트의 장점은 올바른 유형만 있으면 모든 유형에 액세스할 수 있다는 것입니다.@types/files.complete files files files files files files files files.

에 답하기 저는 '이 ' 반응'으로 '성분 반응'으로 있는 것을 .children네. 네. 네. 네.?<div />

필요한 것은 vscoode를 오픈하고 새로운 vscoode를 생성하기만 하면 됩니다..tsx@types/react.

import React from 'react';

export default () => (
  <div children={'test'} />
);

상공을 맴돌다childrenprop는 유형을 보여줍니다.그리고 당신이 아는 것은 -- 그 타입은 (필요 없음)입니다.ReactNode[]).

그런 다음 유형 정의를 클릭하면 바로 다음 정의로 이동합니다.children유래하다DOMAttributes인터페이스입니다.

// node_modules/@types/react/index.d.ts
interface DOMAttributes<T> {
  children?: ReactNode;
  ...
}

주의: 알 수 없는 유형을 찾으려면 이 프로세스를 사용해야 합니다.모두 당신이 찾기를 기다리고 있습니다.

를 사용할 수도 있습니다.JSX.ElementChildrenAttribute

export default function Layout({children}: JSX.ElementChildrenAttribute) {
    return <div>
        {children}
    </div>
}

저는 'JSX'입니다.Element"는 기능합니다.

interface childrenProps {
    children: JSX.Element;
}

const index = ({ children }: childrenProps) => {
    return (
        <>
            <NavBar />
            {children}
        </>
    );
};

export default index;

TypeScript 사이트:https://github.com/Microsoft/TypeScript/issues/6471 에서 입수합니다.

소품 타입을 {children}으로 쓰는 것이 권장되는 연습입니까?: any}

나한테는 효과가 있었어.자노드는 여러 가지가 있기 때문에 명시적 입력으로 인해 대소문자가 누락될 수 있습니다.

다음 문제에 대해서는 https://github.com/Microsoft/TypeScript/issues/13618,에서 더 긴 논의를 하고 있지만, 어떤 접근법도 여전히 유효합니다.

이러한 답변은 오래된 것 같습니다.리액션에는 타입이 내장되어 있습니다.PropsWithChildren<{}>이 페이지의 일부 정답과 동일하게 정의되어 있습니다.

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

이것은 항상 나에게 효과가 있었다.

type Props = {
  children: JSX.Element;
};

자녀가 포함된 유형으로 다음을 사용하고 있습니다.

type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">

이 어린이 컨테이너 유형은 모든 다양한 사례를 지원할 수 있을 정도로 일반적이며 반응에도 적합합니다.JS API

예를 들어 다음과 같습니다.

const layout = ({ children }: ChildrenContainer) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {children}
        </main>
    <Aux/>
)

1. 모든 반응 컴포넌트가 반환되어야 한다는 것을 알아야 합니다.null또는React.Element, 단, 타입은props.children이React.ReactNode를 사용해야 합니다.props.children안쪽에서ElementBabel이 컨스트럭터를 구성하도록 하다Element.

2. 리액션 컴포넌트의 두 번째 규칙은 이름의 첫 번째 문자가 대문자가 되어야 리액션이 컴포넌트가 html 태그가 아니라는 것을 인식할 수 있다는 것입니다.

코드는 이렇게 해야 합니다.

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

---

또 다른 힌트: 아직 타이프스크립트를 사용하고 있는 경우 기능 컴포넌트는 다음 타입이어야 합니다.React.FC

type Props = {
   title: string;
}

const Aux:React.FC<Props> = (props) =>
(
    <div>
        <h3>{props.title}</h3>
        { props.children }
        {/* children is exist by default in type React.FC */}
    </div>
)

나에게 @Sibren의 대답은 명확하지 않았지만, 나는 이 SO anwer를 찾아서 모두 인라인으로 만들었다(그것이 가장 빠른 방법이 아니라 가장 이해하기 쉬운 방법일지도 모른다).

function MyComponentWithChildren({
    customProp,
    children, /*notice the children are implicit*/
}: React.PropsWithChildren<{ customProp: any }>) {
    return <div>{children}</div>;
}

React를 확장할 수도 있습니다.PropesWithChildren을 자녀 속성이 포함된 인터페이스에 연결합니다.

interface Props extends React.PropsWithChildren{
    listItems: Items[],
    clickItem?: () => void,
    
}

아니면 직접 아이들을 정의할 수도 있습니다.

interface Props{
    listItems: Items[],
    clickItem?: () => void,
    children: React.ReactNode  
}

const List:FC<Props> = ({listItems,clickItem,children}) =>  {

  return (
    <>
    {children}
    </>
    
  )
}

아니면 이렇게 해도 돼요.이것은 소품 유형을 정의하는 또 다른 방법입니다.

const List = ({ children }: {children: React.ReactNode}) =>  {

하여 '''만 할 수 .children이 without가 없는 type ★★★★★★★★★★★★★★★★★」interfaceFC(일부러) 태그 jsx는 jsx라고 합니다.<>가 될 수 undefined ★★★★★★★★★★★★★★★★★」null:

import { FC } from "react";

export const Layout: FC = (props) => {
  return <>{props.children}</>;
};

-- 또는 --

import { FC } from "react";

export const Layout: FC = ({ children }) => <>{children}</>;

이 솔루션은 나에게 완벽하게 잘 작동한다

interface Props {
    children: Array<ReactElement<ChildProps, JSXElementConstructor<ChildType>>>;
}

update: 이해하기 쉬운 포괄적인 예.

interface ChildProps {}

class ChildComponent extends React.Component<ChildProps> {}

interface ParentProps {
    children: Array<ReactElement<ChildProps, JSXElementConstructor<ChildComponent>>>;
}

class ParentComponent extends React.Component<ParentProps> {}

언급URL : https://stackoverflow.com/questions/53688899/what-is-the-type-of-the-children-prop