TypeScript React.FC 혼선

TypeScript React.FC 혼선

나는 TypeScript를 배우고 있는데, 일부 비트가 헷갈려.1비트는 다음과 같다.

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

위의 두 기능 구성 요소에 대해 TypeScript에서 동일한 JS 코드를 생성한다는 것을 알 수 있다.그PrintName2읽기 쉽도록 구성 요소가 더 능률적으로 보인다.두 정의의 차이점과 두 번째 유형의 리액션 구성 요소를 사용하는 사람이 있는지 궁금하다.

대답해줘서 고마워.맞는데 좀 더 자세한 버전을 찾고 있었어.나는 몇 가지 더 조사했고 이것을 GitHub의 React+TypeScript Chatsheets에서 발견했다.

기능 구성 요소
이것들은 소품 인수를 취하고 JSX 요소를 반환하는 정상적인 함수로 쓰일 수 있다.

type AppProps = { message: string }; /* could also use interface */

const App = ({ message }: AppProps) => <div>{message}</div>;

어때는 ?React.FC/React.FunctionComponent당신은 또한 다음과 같은 구성 요소들을 쓸 수 있다.React.FunctionComponent)React.FC):

const App: React.FC<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

"정상 함수" 버전과의 일부 차이점:

다음과 같은 정적 속성에 대한 유형 확인 및 자동 완성 기능을 제공한다.displayName propTypes그리고defaultProps - -러나, 현재려 using를 하는 것으로 .defaultProps와 함께React.FunctionComponent자세한 내용은 이 문제를 참조하십시오. 아래로 스크롤하여 다음 사이트를 참조하십시오.defaultProps여기에 권장 사항을 입력하기 위한 섹션

그것은 아동의 암묵적 정의를 제공한다(아래 참조). 그러나 암묵적 아동의 유형에는 몇 가지 문제가 있다(예: 확실하다).타이핑 #33006), 그리고 어쨌든 어린이를 소비하는 구성요소에 대해 명시하는 것이 더 나은 스타일로 여겨질 수 있다.

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title
}) => <div title={title}>{children}</div>;

앞으로는 매개 변수 목록에서 소품 객체가 파괴되면 그것이 무트 포인트지만 자동으로 소품만을 읽기 전용으로 표시할 수 있다.

React.FunctionComponent정상 함수 버전이 암시적(또는 추가 주석이 필요함)인 동안 반환 유형에 대해 명시적이다.

대부분의 경우 어떤 구문을 쓰느냐의 차이는 거의 없지만, 그 구문은 거의 없다.React.FC구문은 명확한 이점을 제공하지 않고 약간 더 장황하게 되어, "정상 함수" 구문에 우선권이 주어졌다.

React.FCReact 구성 요소를 입력하는 데 선호되는 방법이 아니며, 여기에 링크가 있다.

나는 개인적으로 다음과 같은 유형을 사용한다.

const Component1 = ({ prop1, prop2 }): JSX.Element => { /*...*/ }

의 짧은 목록React.FC단점:

1. 구성요소에 자녀가 없어도 자녀에 대한 암묵적 정의를 제공한다.그것은 오류를 일으킬 수 있다.
2. 제네릭을 지원하지 않는다.
3. 와 제대로 작동하지 않음defaultProps.

최상의 솔루션:

두 번째 접근 방식 + 반환 유형

const PrintName2 = ({ prop1, prop2 }: Props): JSX.Element => { /** */}

이렇게 하면 소품들에 대한 완전한 통제력을 얻을 수 있고 더 노골적이다(숨겨진 마법은 없다).

React를 제거하려면 GitHub PR에 연결하십시오.FC

켄트 C 도드즈는 이게 왜 여기 있는지 몇 가지 생각을 하고 있다.

차선책:

첫 번째 버전(React).FC)가 몇 가지 유형을 추가함 - 반응 타이핑에서 가져온 유형

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

이 접근법은 몇 가지 이유로 유용하지만 분명한 것은 구성 요소에 자녀가 있는 경우 수동으로 추가할 필요가 없다는 것이다.children소품. 기본 소품에 문제가 있고 많은 부품에 아이가 없어서 좋지 않아.

React와 TypeScript를 사용하고 있으므로, 항상 첫 번째 패턴을 사용해야 하며, 이는 다음 사항을 의미하기 때문에 구성 요소를 보다 엄격하게 입력할 수 있기 때문이다.PrintName반응 기능 구성 요소 유형이며, 유형별로 소품 포함Props.

const PrintName: React.FC<Props>

반응 유형스크립트 타이핑 리포지토리에서 기능 구성요소에 대한 전체 인터페이스 정의를 읽을 수 있다.

제공한 두 번째 예제는 유형 매개변수 집합을 취하는 함수라는 점을 제외하고 어떤 형태의 오타도 제공하지 않는다.Props그리고 그것은 일반적으로 모든 것을 돌려줄 수 있다.

그러므로 글쓰기는

const PrintName2 = (props:Props)

와 비슷하다

const PrintName2: JSX.Element = (props:Props) 

TypeScript는 확실히 그것이 기능적 구성요소라는 것을 자동으로 유추할 수 없다.

참조URL: https://stackoverflow.com/questions/59988667/typescript-react-fcprops-confusion