98

私は 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コンポーネントは、読みやすさに関してはより合理化されているように思えます。2 つの定義の違いは何ですか? 誰かが 2 番目のタイプの React コンポーネントを使用しているのだろうか?

4

4 に答える 4

59

React.FCは、React コンポーネントを入力するのに適した方法ではありません。ここにリンクがあります。

私は個人的にこのタイプを使用します：

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

React.FC短所の短いリスト:

  1. コンポーネントが子を持つ必要がない場合でも、子の暗黙的な定義を提供します。エラーの原因となる場合があります。
  2. ジェネリックはサポートしていません。
  3. では正しく動作しませんdefaultProps。
于 2020-05-01T16:58:30.203 に答える