Eine kurze Diskussion zur Verwendung von React.FC und React.Component

React-Komponenten können als Funktionen (React.FC<>) oder Klassen (die React.Component erben) definiert werden.

1. Reagieren.FC<>

1. React.FC ist eine funktionale Komponente, ein in TypeScript verwendetes Generikum. FC ist die Abkürzung für FunctionComponent. Tatsächlich kann React.FC als React.FunctionComponent geschrieben werden:

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

2. React.FC enthält PropsWithChildren-Generika, sodass Sie den Typ von props.children nicht explizit deklarieren müssen. React.FC<> ist explizit in Bezug auf den Rückgabetyp, während die normale Funktionsversion implizit ist (und andernfalls eine zusätzliche Annotation erfordern würde).

3. React.FC bietet Typprüfung und Autovervollständigung statischer Eigenschaften: displayName, propTypes und defaultProps (Hinweis: Es gibt einige Probleme bei der Verwendung von defaultProps in Verbindung mit React.FC).

4. Wenn wir React.FC zum Schreiben von React-Komponenten verwenden, können wir setState nicht verwenden. Stattdessen verwenden wir Hook-APIs wie useState() und useEffect.

Beispiel (zur Demonstration wird hier Alis Ant Design Pro-Framework verwendet):

const SampleModel: React.FC<{}> = () =>{ //React.FC<> ist ein generischer Typ, der von Typescript verwendet wird const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
   zurückkehren {
   {/** Modalbox auslösen **/}
   <Button style={{fontSize:'25px'}} onClick={()=>handleModalVisible(true)} >Beispiel</Button>
   {/** Modalbox-Komponente **/}
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }

2. Klasse xx erweitert React.Component

Wenn Sie eine Klassenkomponente definieren möchten, müssen Sie React.Component erben. React.Component ist eine Klassenkomponente. In TypeScript ist React.Component ein generischer Typ (auch bekannt als React.Component<PropType, StateType>), daher stellen Sie ihm (optional) Parameter vom Typ „prop“ und „state“ zur Verfügung:

Beispiel (zur Demonstration wird hier Alis Ant Design Pro-Framework verwendet):

Klasse SampleModel erweitert React.Component {
  Zustand = {
    createModalVisible:false,
  };

  handleModalVisible =(cVisible:boolean)=>{
    Dies.setState({createModalVisible:cVisible});
  };
  zurückkehren {
  {/** Modalbox auslösen **/}
   <Button onClick={()=>this.handleModalVisible(true)} >Beispiel</Button>
   {/** Modalbox-Komponente **/}
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
  }

PS: Einfach ausgedrückt, wenn Sie nicht wissen, welchen Komponententyp Sie verwenden sollen, verwenden Sie React.FC.

Damit ist dieser Artikel über die Verwendung von React.FC und React.Component in React abgeschlossen. Weitere Inhalte zu React.FC und React.Component in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!