React.FCとReact.Componentの使用に関する簡単な説明

1. React.FC<>

1. React.FC は関数コンポーネントであり、TypeScript で使用されるジェネリックです。FC は FunctionComponent の略です。実際、React.FC は React.FunctionComponent と記述できます。

const アプリ: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{メッセージ}</div>
);

2. React.FC には PropsWithChildren ジェネリックが含まれているため、props.children の型を明示的に宣言する必要はありません。 React.FC<> は戻り値の型について明示的ですが、通常の関数バージョンは暗黙的です (そうでない場合は追加の注釈が必要になります)。

3. React.FC は、静的プロパティの型チェックと自動補完を提供します: displayName、propTypes、defaultProps (注: React.FC と組み合わせて defaultProps を使用すると、いくつか問題が発生します)。

4. React.FC を使用して React コンポーネントを記述する場合、setState は使用できません。代わりに、useState() や useEffect などの Hook API を使用します。

例 (ここではデモンストレーションのために Ali の Ant Desgin Pro フレームワークが使用されています):

const SampleModel: React.FC<{}> = () =>{ //React.FC<> は、Typescript で使用される汎用型です。const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
   戻る {
   ** モーダル ボックスをトリガー **/
   <Button style={{fontSize:'25px'}} onClick={()=>handleModalVisible(true)} >例</Button>
   {/** モーダル ボックス コンポーネント **/
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }

2. クラスxxはReact.Componentを拡張します

クラスコンポーネントを定義する場合は、React.Component を継承する必要があります。 React.Component はクラスコンポーネントです。TypeScript では、React.Component はジェネリック型 (別名 React.Component<PropType, StateType>) なので、(オプションの) prop および state 型パラメータを指定します。

例 (ここではデモンストレーションのために Ali の Ant Desgin Pro フレームワークが使用されています):

クラスSampleModelはReact.Componentを拡張します{
  状態 = {
    作成モーダル表示:false、
  };

  handleModalVisible =(cVisible:boolean)=>{
    this.setState({createModalVisible:cVisible});
  };
  戻る {
  ** モーダル ボックスをトリガー **/
   <Button onClick={()=>this.handleModalVisible(true)} >例</Button>
   {/** モーダル ボックス コンポーネント **/
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
  }

ps: 簡単に言うと、どのコンポーネントタイプを使用するかわからない場合は、React.FC を使用します。

これで、React での React.FC と React.Component の使用に関するこの記事は終了です。React での React.FC と React.Component に関するその他のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: