TypeScript에서 React Stateless 기능 구성 요소를 사용하는 방법

TypeScript에서 React Stateless 기능 구성 요소를 사용하는 방법

TypeScript와 React를 함께 사용하면 더 이상 확장하지 않아도 됩니다.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' 속성이 없습니다.

이것은 컴파일러가 바닐라 함수가 제공된다는 것을 알 수 있는 방법이 없기 때문이라고 생각합니다.children소품 논쟁에서요.

문제는 TypeScript의 상태 비저장 기능 컴포넌트에서 아이를 어떻게 사용해야 하는가입니다.

예전 방식으로 돌아갈 수도 있고MyProps extends React.Props단,Props인터페이스가 더 이상 사용되지 않는 것으로 표시되며 상태 비저장 구성 요소에는 이 구성 요소가 없거나 지원되지 않습니다.Props.ref제가 알기로는

그래서 내가 정의 할 수 있는 건children수동으로 지지:

interface MyProps {
  children?: React.ReactNode;
}

첫 번째: 이ReactNode올바른 타입?

두 번째: 옵션으로 아이를 써야 합니다.?그렇지 않으면 소비자는 다음과 같이 생각할 것이다.children컴포넌트 속성(<MyStatelessComponent children={} />값을 지정하지 않으면 오류를 발생시킵니다.

뭔가 빠진 것 같아요.마지막 예제가 React에서 아이들과 함께 상태 비저장 기능 구성 요소를 사용하는 방법인지 여부를 명확하게 설명해 줄 수 있는 사람이 있습니까?

사용할 수 있습니다.React.PropsWithChildren<P>소품 입력:

interface MyProps { }

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

대응 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>

리액트 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을 가지고 있다children재산뿐만 아니라 재산MyProps인터페이스입니다.

저는 이것을 타이프스크립트 버전 2.0.7에서 확인했습니다.

또, 다음과 같은 기능을 사용할 수 있습니다.React.SFC대신React.StatelessComponent간결하게.

간단한 답변:사용하다ReactNode:

interface MyProps {
  children?: React.ReactNode
}

한다면children옵션인지 아닌지를 확인합니다(즉,?사용하시는 컴포넌트에 따라 달라집니다.그?가장 간결하게 표현하는 방법이기 때문에 문제될 것은 없습니다.

이력:이것은, 당초의 질문에서는 반드시 올바른 회답변호사:종류ReactNode2017년 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>} />

구성 요소가 필요한 컨테이너에 연결된 경우 구성 요소에 하위 항목을 추가할 수 있습니다.

const MyComponent = ({ 
   children  
}) => {
  return <div>{children}</div>

}

사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/40748397/how-to-use-children-with-react-stateless-functional-component-in-typescript