クラスコンポーネントの React フック-jsチュートリアル-php.cn

React Hook in Class Component

導入

一部のシナリオでは、React クラスベースのコンポーネントで React フックの概念を使用する必要があると仮定します。

しかし、ご存知のとおり、反応フックは、クラスベースのコンポーネントで直接使用したい場合、機能コンポーネントでのみ機能します。

エラーが発生します。

それでは、どうすればよいでしょうか。同じ問題を回避する解決策があります。

解決策は 3 ステップあります

カスタムフックを作成します (フックを直接使用することもできますが、それ以上の利点は得られません)
高次コンポーネントでフックを使用する
高次コンポーネントをクラスベースのコンポーネントでラップする必要があります。

カスタムフックを作成する

import {useState} from 'react'; const useGreet = () => { const [text, setText] = useState(''); //... do any additional operation / hooks you want to add return text; }

ログイン後にコピー

高次コンポーネントの作成

// import useGreet export const MyHigherOrderComponentDemo = (Component) => { return (props) => { const text = useGreet(); return ; } }

ログイン後にコピー

クラスベースのコンポーネントで高次コンポーネントをラップする

// import useGreet class MyClass extends React.component { render() { return ( {this.props.text}
 ) } } export default MyHigherOrderComponentDemo(MyClass);

ログイン後にコピー

以上がクラスコンポーネントの React フックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。