2017-12-27 5 views
0

나는 새가 react-native init를 사용하여 기본 프로젝트를 반응하여 생성 된 템플릿, 주요 구성 요소 클래스는 다음과 같습니다 만든 기본 <{}> 구문을 반응한다. 나는 전에 이것을 보지 못했고 모든 예는 그것을 생략 한 것처럼 보인다. 그 목적이 무엇이며 필요한지 궁금하다.

답변

0

이것은 Typescript of Flow입니다. 일반적으로 propType은 propType이 아니라 인터페이스 또는 유형으로 표시됩니다. 그런 다음 유형이 React.Component에 제네릭으로 전달됩니다. 소품의

유형은 실제로

매우 유용하고 편리한 물건 주

에 대한 두 번째 두 개의 일반적인 인수, 거기에 전달 된 유형 플러스 { children?: ReactNode }

될 것이다. https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

2

typescript를 사용할 때 예상되는 값 유형을 지정해야합니다. 이를 통해 컴파일 시간 동안 불일치 속성을 감지하고 오류의 양을 줄일 수 있습니다.

Component<{}>을 입력하면 Props의 유형은 {}이고 유형은 컴포넌트입니다.

Component 클래스는 모양의 반작용하는 방법입니다

당신이 발견하는 경우 enter image description here

, 유형 <Props, State>을 의미하는 <P, S>이다.

서명 <P>을 갖는다 ComponentClass 불리는 다른 인터페이스가있다

, any 상태로 내부적으로 새로운 구성 요소를 초기화

enter image description here

. 이 인터페이스는 ReactElement's type에 사용됩니다

enter image description here

그래서 모두 모두를

, 당신은 어떤 소품을지지 않습니다하고 있지만, 모든 종류의 상태를 가질 수있는 구성 요소를 정의하고 있습니다. 이는 대개 구성 요소의 상호 작용에 대해 잘 모를 때 수행됩니다.

이상적으로 구성 요소는 다음과 같아야합니다

interface IComponentState { 
    ... 
} 

interface IComponentProps { 
    ... 
} 

export class MyComponent<IComponentProps, IComponentState> extends React.Component { 
    ... 
} 

이 필요한 속성을 전달하는 소비자를 시행하고 국가의 적절한 값을 가지고 당신을 적용합니다.

+0

그러나 반응하는 원시 파일에는 'ts'가 아닌'js' 확장자가 있습니다. –