Bagaimana untuk Mengintegrasikan Cangkuk Reaksi ke dalam Komponen Kelas Menggunakan Komponen Pesanan Tinggi (HOC)?

Menggabungkan React Hooks ke dalam Komponen Kelas React

Dalam komponen kelas React tradisional, kaedah pembina dan komponen mengendalikan pengurusan keadaan dan kefungsian tersuai. Walau bagaimanapun, cangkuk React menyediakan pendekatan alternatif untuk mengurus keadaan dan mencipta logik boleh guna semula.

Walaupun tidak mungkin untuk menyepadukan secara langsung cangkuk ke dalam komponen kelas, terdapat teknik yang dikenali sebagai komponen peringkat tinggi (HOC). HOC membalut komponen dan menyediakan kefungsian atau data tambahan.

Melaksanakan Cangkuk Reaksi dalam Komponen Kelas

Untuk menambah cangkuk React pada komponen kelas, ikut langkah berikut:

1. Tentukan HOC yang memanggil cangkuk yang diingini dan menyediakan outputnya sebagai penyokong kepada komponen yang dibalut.

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

2. Balut komponen kelas dengan HOC.

<code class="javascript">import { withMyHook } from './withMyHook';

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

export default withMyHook(MyComponent);</code>

Contoh Penggunaan

Pertimbangkan komponen kelas berikut:

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

Untuk memasukkan cangkuk useState ke dalam MyDiv, buat HOC yang memanggil useState dan sediakan keadaan yang terhasil sebagai prop.

<code class="javascript">const withSampleState = withMyHook((props) => useState(props.initialState));</code>

Balut MyDiv dengan withSampleState HOC dan lulus keadaan awal yang diingini:

<code class="javascript">const MyDivWithState = withSampleState({
  initialState: 'hello world',
})(MyDiv);</code>

Kini, komponen MyDivWithState boleh mengakses keadaan yang disediakan oleh cangkuk useState dalam HOC .

Atas ialah kandungan terperinci Bagaimana untuk Mengintegrasikan Cangkuk Reaksi ke dalam Komponen Kelas Menggunakan Komponen Pesanan Tinggi (HOC)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!