A brief discussion on the use of React.FC and React.Component

React components can be defined as functions (React.FC<>) or classes (inheriting React.Component).

1. React.FC<>

1. React.FC is a functional component, a generic used in TypeScript. FC is the abbreviation of FunctionComponent. In fact, React.FC can be written as React.FunctionComponent:

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

2. React.FC includes PropsWithChildren generics, so you don’t need to explicitly declare the type of props.children. React.FC<> is explicit about the return type, whereas the normal function version is implicit (and would require an additional annotation otherwise).

3. React.FC provides type checking and auto-completion of static properties: displayName, propTypes, and defaultProps (Note: there are some issues with using defaultProps in conjunction with React.FC).

4. When we use React.FC to write React components, we cannot use setState. Instead, we use Hook APIs such as useState() and useEffect.

Example (Ali's Ant Desgin Pro framework is used here for demonstration):

const SampleModel: React.FC<{}> = () =>{ //React.FC<> is a generic type used by typescript const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
   return {
   {/** Trigger modal box **/}
   <Button style={{fontSize:'25px'}} onClick={()=>handleModalVisible(true)} >Example</Button>
   {/** Modal box component **/}
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }

2. class xx extends React.Component

If you want to define a class component, you need to inherit React.Component. React.Component is a class component. In TypeScript, React.Component is a generic type (aka React.Component<PropType, StateType>), so you provide it with (optional) prop and state type parameters:

Example (Ali's Ant Desgin Pro framework is used here for demonstration):

class SampleModel extends React.Component {
  state = {
    createModalVisible:false,
  };

  handleModalVisible =(cVisible:boolean)=>{
    this.setState({createModalVisible:cVisible});
  };
  return {
  {/** Trigger modal box **/}
   <Button onClick={()=>this.handleModalVisible(true)} >Example</Button>
   {/** Modal box component **/}
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
  }

ps: Simply put, when you don’t know what component type to use, use React.FC.

This concludes this article on the use of React.FC and React.Component in React. For more content about React.FC and React.Component in React, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!