React Hook dalam Komponen Kelas

pengenalan

Dalam sesetengah senario, anggap anda perlu, gunakan konsep cangkuk React dalam komponen berasaskan kelas tindak balas.

Tetapi seperti yang anda ketahui, cangkuk tindak balas hanya akan berfungsi dalam komponen berfungsi jika anda ingin menggunakannya secara langsung dalam komponen berasaskan kelas.

ia akan melalui ralat.

Jadi bagaimana untuk melakukannya, terdapat penyelesaian penyelesaian untuk perkara yang sama.

Terdapat 3 langkah penyelesaian

1. Buat Cangkuk tersuai, (Anda boleh terus menggunakan cangkuk, tetapi di sana anda tidak akan mendapat lebih banyak faedah)
2. Gunakan cangkuk dalam komponen tertib lebih tinggi
3. Kita perlu membalut komponen Pesanan Tinggi dalam komponen berasaskan kelas.

Buat Cangkuk tersuai

import {useState} from 'react';

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

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

return text;   
}

Mencipta Komponen Tertib Tinggi

// import useGreet

export const MyHigherOrderComponentDemo = (Component) => {

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

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

Balut Komponen Susunan Tinggi dalam komponen berasaskan kelas

// import useGreet

class MyClass extends React.component {

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

}

export default MyHigherOrderComponentDemo(MyClass);

Atas ialah kandungan terperinci React Hook dalam Komponen Kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!