web-dev-qa-db-fra.com

Comment utiliser les crochets React dans le composant `classe` de React classic?

Dans cet exemple, j'ai cette classe de réaction:

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

La question est de savoir si je peux ajouter des crochets React à ceci. Je comprends que React-Hooks est une alternative au style React Class. Mais si je souhaite migrer lentement dans les crochets React, puis-je ajouter des crochets utiles dans les classes?

javascriptreactjsreact-hooks
5
Aminadav Glickshtein

Les composants de classe ne supportent pas les hooks - 

Selon la Crochets-FAQ :

Vous ne pouvez pas utiliser les crochets à l'intérieur d'un composant de classe, mais vous pouvez certainement mélanger des classes et des composants de fonction avec des crochets dans une seule arborescence. Le fait qu'un composant soit une classe ou une fonction qui utilise des crochets est un détail d'implémentation de ce composant. À plus long terme, nous nous attendons à ce que les crochets soient le principal moyen d'écrire les composants React.

8
Gilad Bar

Les crochets ne sont pas destinés à être utilisés pour des classes, mais plutôt à des fonctions. Si vous souhaitez utiliser des hooks, vous pouvez commencer par écrire un nouveau code en tant que composants fonctionnels avec hooks.

Selon FAQ de React

Vous ne pouvez pas utiliser de points d'ancrage à l'intérieur d'un composant de classe, mais vous pouvez mélangez certainement les classes et les composants fonctionnels avec les crochets en un seul arbre. Si un composant est une classe ou une fonction qui utilise Hooks, c'est un détail de mise en œuvre de ce composant. À plus long terme, nous Attendez-vous à ce que les crochets soient le principal moyen d'écrire les composants React.

const MyDiv = () => {
   const [sampleState, setState] = useState('hello world');
   render(){
      return <div>{sampleState}</div>
   }
}
3
Shubham Khatri

Composants d'ordre élevé sont comment nous avons fait ce genre de chose jusqu'à ce que les crochets sont venus. Vous pouvez écrire un wrapper de composant d'ordre élevé simple pour votre hook.

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

Bien que cela n'utilise pas vraiment un hook directement depuis un composant de classe, cela vous permettra au moins d'utiliser le logic de votre hook à partir d'un composant de classe, sans refactoring.

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

MyDiv = withMyHook(MyDiv);
3
Joel Cox

Comme d'autres réponses l'ont déjà expliqué, l'API hooks a été conçue pour fournir aux composants de fonction une fonctionnalité qui n'est actuellement disponible que dans les composants de classe. Les crochets ne sont pas censés être utilisés dans les composants de classe.

Les composants de classe peuvent être écrits pour faciliter la migration des composants de fonction.

Avec un seul état:

class MyDiv extends Component {
   state = {sampleState: 'hello world'};

   render(){
      const { state } = this;
      const setState = state => this.setState(state);

      return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>;
   }
}

est converti en

const MyDiv = () => {
   const [state, setState] = useState({sampleState: 'hello world'});

   return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>;
}

Notez que useState state setter ne fusionne pas les propriétés d’état automatiquement, cela devrait être couvert par setState(prevState => ({ ...prevState, foo: 1 }));

Avec plusieurs états:

class MyDiv extends Component {
   state = {sampleState: 'hello world'};

   render(){
      const { sampleState } = this.state;
      const setSampleState = sampleState => this.setState({ sampleState });

      return <div onClick={() => setSampleState(1)}>{sampleState}</div>;
   }
}

est converti en

const MyDiv = () => {
   const [sampleState, setSampleState] = useState('hello world');

   return <div onClick={() => setSampleState(1)}>{sampleState}</div>;
}
2
estus

Cela ne sera pas possible avec vos composants de classe existants. Vous devrez convertir votre composant de classe en composant fonctionnel et ensuite faire quelque chose dans les lignes de - 

function MyDiv() {
const [sampleState, setSampleState] = useState('hello world');
return (
      <div>{sampleState}</div>
    )
}
1
Aseem Upadhyay