Comment intégrer des hooks React dans des composants de classe à l'aide de composants d'ordre supérieur (HOC) ?

Incorporation de hooks React dans les composants de classe React

Dans les composants de classe React traditionnels, le constructeur et les méthodes de composant gèrent la gestion de l'état et les fonctionnalités personnalisées. Cependant, les hooks React offrent une approche alternative pour gérer l'état et créer une logique réutilisable.

Bien qu'il ne soit pas possible d'intégrer directement des hooks dans les composants de classe, il existe une technique connue sous le nom de composants d'ordre supérieur (HOC). Les HOC enveloppent un composant et fournissent des fonctionnalités ou des données supplémentaires.

Implémentation des hooks React dans les composants de classe

Pour ajouter des hooks React à un composant de classe, suivez ces étapes :

1. Définissez un HOC qui appelle le hook souhaité et fournit sa sortie en tant qu'accessoire au composant encapsulé.

<code class="javascript">function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return <Component {...props} myHookValue={myHookValue} />;
  };
}</code>

2. Enveloppez le composant de classe avec le HOC.

<code class="javascript">import { withMyHook } from './withMyHook';

class MyComponent extends React.Component {
  render() {
    const myHookValue = this.props.myHookValue;
    return <div>{myHookValue}</div>;
  }
}

export default withMyHook(MyComponent);</code>

Exemple d'utilisation

Considérez le composant de classe suivant :

<code class="javascript">class MyDiv extends React.component {
  constructor() {
    this.state = { sampleState: 'hello world' };
  }
  render() {
    return <div>{this.state.sampleState}</div>;
  }
}</code>

Pour incorporer le hook useState dans MyDiv, créez un HOC qui appelle useState et fournit l'état résultant sous forme de prop.

<code class="javascript">const withSampleState = withMyHook((props) => useState(props.initialState));</code>

Enveloppez MyDiv avec le withSampleState HOC et transmettez l'état initial souhaité :

<code class="javascript">const MyDivWithState = withSampleState({
  initialState: 'hello world',
})(MyDiv);</code>

Maintenant, le composant MyDivWithState peut accéder à l'état fourni par le hook useState dans le HOC .

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!