React Hook dans le composant de classe

Introduction

Dans certains scénarios, supposons que vous deviez le faire, utilisez le concept de hook React dans les composants basés sur la classe React.

Mais comme vous le savez, les hooks de réaction ne fonctionneront dans un composant fonctionnel que si vous souhaitez les utiliser directement dans un composant basé sur la classe.

ce sera dû à une erreur.

Alors, comment faire, il existe une solution de contournement pour la même chose.

Il existe une solution en 3 étapes

1. Créez un Hook personnalisé, (Vous pouvez utiliser directement le hook, mais là, vous n'obtiendrez pas plus d'avantages)
2. Utilisez le hook dans un composant d'ordre supérieur
3. Nous devons envelopper le composant d'ordre supérieur dans un composant basé sur la classe.

Créer un Hook personnalisé

import {useState} from 'react';

const useGreet = () => {
  const [text, setText] = useState('');

//... do any additional operation / hooks you want to add

return text;   
}

Création d'un composant d'ordre supérieur

// import useGreet

export const MyHigherOrderComponentDemo = (Component) => {

  return (props) => {
    const text = useGreet();

    return <Component text={text} {...props}/>;
  }
}

Envelopper le composant d'ordre supérieur dans un composant basé sur la classe

// import useGreet

class MyClass extends React.component {

render() {
   return (
    <p>{this.props.text}</p>
  )
}

}

export default MyHigherOrderComponentDemo(MyClass);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!