[reactjs] TypeScript에서 React Stateless Functional Component와 함께 자식을 사용하는 방법은 무엇입니까?

Program / 글쓴이

React와 함께 TypeScript를 사용 React.Props하면 컴파일러가 모든 반응 구성 요소 소품이 자식을 가질 수 있음을 알기 위해 더 이상 확장 할 필요가 없습니다 .

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
  public render(): JSX.Element {
    return <div>{this.props.children}</div>;
  }
}

그러나 상태 비 저장 기능 구성 요소의 경우에는 해당되지 않는 것 같습니다.

const MyStatelessComponent = (props: MyProps) => {
  return (
    <div>{props.children}</div>
  );
};

컴파일 오류를 내 보냅니다.

오류 : (102, 17) TS2339 : ‘MyProps’유형에 ‘children’속성이 없습니다.

나는 컴파일러가 바닐라 함수가 childrenprops 인자에 주어질 것이라는 것을 알 수있는 방법이 정말로 없기 때문이라고 생각합니다 .

그렇다면 질문은 TypeScript의 상태 비 저장 기능 구성 요소에서 자식을 어떻게 사용해야합니까?

의 이전 방법으로 돌아갈 수는 MyProps extends React.Props있지만 Props인터페이스는 deprecated로 표시되며 상태 비 저장 구성 요소에는 Props.ref내가 이해 하는 대로 a가 없거나 지원하지 않습니다 .

따라서 children소품을 수동으로 정의 할 수 있습니다.

interface MyProps {
  children?: React.ReactNode;
}

첫째 : ReactNode올바른 유형입니까?

둘째 : 자식을 선택 사항 ( ?) 으로 작성해야합니다. 그렇지 않으면 소비자가 해당 구성 요소 ( ) children의 속성 이라고 생각 <MyStatelessComponent children={} />하고 값이 제공되지 않으면 오류가 발생합니다.

뭔가 빠진 것 같습니다. 내 마지막 예제가 React에서 자식과 함께 상태 비 저장 기능 구성 요소를 사용하는 방법인지에 대한 명확성을 제공 할 수 있습니까?

답변

React 16.8 업데이트 :
React 16.8부터 React.SFC및 이름 React.StatelessComponent은 더 이상 사용되지 않습니다. 사실, 그것들은 React.FunctionComponent유형 또는 React.FC줄임말의 별칭이되었습니다 .

그래도 동일한 방식으로 사용합니다.

const MyStatelessComponent : React.FunctionComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

React 16.8 이전 (이전) :

지금은 다음 React.StatelessComponent<>과 같이 유형을 사용할 수 있습니다 .

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

내가 추가 한 것은 구성 요소의 반환 유형을 유형으로 설정하는 것입니다 React.StatelessComponent.

사용자 정의 소품 (예 MyProps: 인터페이스)이 있는 구성 요소의 경우 :

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

이제 인터페이스 에서 속성과 속성을 props얻었습니다 .childrenMyProps

나는 이것을 typescript 버전 2.0.7에서 확인했습니다.

또한 간결성 React.SFC을 React.StatelessComponent위해 대신 사용할 수 있습니다 .

답변

React.PropsWithChildren<P>소품에 유형을 사용할 수 있습니다 .

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}

답변

당신이 사용할 수있는 

interface YourProps { }
const yourComponent: React.SFC<YourProps> = props => {}

답변

더 간단한 대답 : 사용 ReactNode:

interface MyProps {
  children?: React.ReactNode
}

경우 children선택 여부 (즉 필요 ?여부) 구성 요소에 따라 달라집니다. 이것은 ?그것을 표현하는 가장 간결한 방법이므로 잘못된 것은 없습니다.

역사상 : 이것은 원래 질문했을 때 반드시 정답이 아니 었습니다. 유형 ReactNode은 2017 년 3 월 에이 풀 리퀘스트에 의해서만 (거의) 현재 양식에 추가 되었지만, 오늘 이것을 읽는 거의 모든 사람들 은 최신 버전의 React에 있어야 합니다. .

마지막 children으로 “속성”으로 전달하는 것에 대해 (React 용어에서는 속성이 아닌 “prop”로 전달합니다) 가능하지만 대부분의 경우 JSX 자식을 전달할 때 더 잘 읽 힙니다.

<MyComponent>
  <p>This is part of the children.</p>
</MyComponent>

보다 쉽게 ​​읽습니다.

<MyComponent children={<p>This is part of the children.</p>} />

답변