反応クラスコンポーネントでフックを使う方法

3878 ワード
react javascript webdev テキストリンク
あなたはおそらく考えている、なぜ地球上の誰がクラスベースのコンポーネント、2つの単語、レガシープロジェクトのフックを使用するでしょう.
フックはクールで機能的なコンポーネントですが、クラスベースのコンポーネントのロードを持っている4年古いプロジェクトに取り組んでいる場合は、関数ベースのコンポーネントにそれらを変換する時間がありません.さらに、新しいライブラリの負荷はフックを使用するだけです.
ですから、レガシープロジェクトを最新の状態にしたいなら、これは本当に役立つテクニックです.

暗号


import { Component } from 'react';
import { useNavigate } from 'react-router-dom';

class Login extends Component {
  render() {
    return (
      <>
        <p>My awesome component</p>
        <button type="button" onClick={() => this.#handleClick()}>
          Click here
        </button>
      </>
    );
  }

  #handleClick() {
    this.props.navigate('/dashboard');
  }
}

function addHookTo(Component) {
  function CompWithHook(props) {
    const navigate = useNavigate();

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

  return CompWithHook;
}

export default addHookTo(Login);
Aaaaaandそれはそれです!

信用がある信用


私はすべての信用を取ることができて、私の巧妙な心がこれをすべて考え出したと言うことができました、しかし、私はここで反応Routerウェブサイトでそれを実際に見ました
彼らは複数のフックを追加する上で良い例があります.
とにかく、私はあなたがこれが役に立つと思います.
コード重複を防ぐためのコールバックの使用
Huggingface変圧器パイプライン - ビジョン:使用方法、展開、およびサービス提供