Reagieren Sie Hook in der Klassenkomponente

Einführung

In einigen Szenarien müssen Sie das React-Hook-Konzept in reaktionsklassenbasierten Komponenten verwenden.

Aber wie Sie wissen, funktionieren Reaktions-Hooks nur in Funktionskomponenten, wenn Sie sie direkt in klassenbasierten Komponenten verwenden möchten.

es wird ein Fehler passieren.

Wie es geht, es gibt eine Workaround-Lösung dafür.

Es gibt 3-Schritte-Lösungen

1. Erstellen Sie einen benutzerdefinierten Hook (Sie können den Hook direkt verwenden, aber dadurch erhalten Sie keinen größeren Nutzen)
2. Verwenden Sie den Haken in einer Komponente höherer Ordnung
3. Wir müssen die Komponente höherer Ordnung in eine klassenbasierte Komponente einschließen.

Erstellen Sie einen benutzerdefinierten Hook

import {useState} from 'react';

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

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

return text;   
}

Erstellen einer Komponente höherer Ordnung

// import useGreet

export const MyHigherOrderComponentDemo = (Component) => {

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

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

Komponente höherer Ordnung in klassenbasierte Komponente einschließen

// import useGreet

class MyClass extends React.component {

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

}

export default MyHigherOrderComponentDemo(MyClass);

Das obige ist der detaillierte Inhalt vonReagieren Sie Hook in der Klassenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!