web-dev-qa-db-ja.com

Typescript React.FC <Props>の混乱

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番目のタイプの反応コンポーネントを使用していますか？.

javascriptreactjstypescriptfrontend
10
Kuldeep Bora

React.FCは、Reactコンポーネントを入力するための推奨される方法ではありません。 link があります。

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

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

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

  1. 子の暗黙の定義を提供します。コンポーネントが子を持つ必要がない場合でも、エラーが発生する可能性があります。
  2. ジェネリックはサポートしていません。
  3. DefaultPropsでは正しく機能しません。
3
Alexander Kim

ReactとTypeScriptを使用しているため、PrintNameがタイプReact機能コンポーネント、およびタイプPropsの小道具を取り込みます。

const PrintName: React.FC<Props>

React TypeScriptの型付け repository で、機能コンポーネントの完全なインターフェース定義を読むことができます。

あなたが提供した2番目の例は、タイプがPropsのパラメータのセットを取る関数であり、一般的に何でも返すことができることを除いて、タイピングの形式を提供していません。

したがって、書き込み

const PrintName2 = (props:Props)

に似ています

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

typeScriptは、それが機能コンポーネントであることを自動的に推測することはできません。

2
wentjun