クラスコンポーネントの React フック

導入

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

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

エラーが発生します。

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

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

1. カスタムフックを作成します (フックを直接使用することもできますが、それ以上の利点は得られません)
2. 高次コンポーネントでフックを使用する
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 <Component text={text} {...props}/>;
  }
}

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

// import useGreet

class MyClass extends React.component {

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

}

export default MyHigherOrderComponentDemo(MyClass);

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