3 pendekatan untuk mengintegrasikan reaksi dengan elemen tersuai

Komponen web, dengan keserasian dan keserasian pelayar mereka, menawarkan kelebihan yang menarik untuk pemaju web, terutamanya dalam organisasi besar yang bertujuan untuk pengalaman pengguna yang konsisten di pelbagai rangka kerja. Walau bagaimanapun, salah tanggapan umum wujud yang React, perpustakaan front-end utama, tidak mengintegrasikan dengan baik dengan komponen web. Artikel ini menghilangkan mitos itu dengan menunjukkan teknik integrasi yang lancar.

Walaupun keserasian React dengan komponen web dapat dipertingkatkan, tuntutan integrasi yang lemah tidak tepat. Kami akan meneroka amalan dan batasan terbaik, mewujudkan pembalut dan pragmas JSX adat untuk mencapai gandingan yang lebih ketat antara elemen tersuai dan bertindak balas.

Mengintegrasikan Komponen React dan Web: Tiga Pendekatan

Pertimbangkan React sebagai buku pewarna - kami akan meneroka cara untuk mengintegrasikan elemen tersuai dengan berkesan sambil mematuhi struktur React. Kami akan menggunakan elemen tersuai yang mudah (dibina dengan litelement untuk memudahkan, tetapi boleh disesuaikan dengan unsur-unsur yang dibina khas) yang melampirkan input teks ke dom bayangan dan memancarkan peristiwa pada perubahan nilai. Unsur ini, sementara asas, berkesan menggambarkan teknik integrasi yang terpakai bagi komponen yang lebih kompleks.

Pendekatan 1: Menggunakan ref

Dokumentasi React mencadangkan menggunakan ref untuk mengakses API Imperatif Komponen Web. Ini adalah perlu kerana sistem SyntheticEvent React dan akses elemen DOM deklaratif berbeza daripada peristiwa DOM asli.

Kami menggunakan cangkuk useRef React untuk merujuk elemen dom asli, useEffect dan useState untuk mengakses dan menjadikan nilai input, dan ref untuk memanggil kaedah elemen tersuai. Secara kritis, blok useEffect dengan teliti menguruskan pendengar acara untuk mengelakkan kebocoran memori:

 useeffect (() => {
  coolInput.current.addeventListener ('custom-input', eventListener);
  kembali () => {
    CoolInput.Current.RemoveEventListener ('Custom-Input', EventListener);
  };
});

Pendekatan ini berfungsi, tetapi ia adalah verbose dan tidak merasakan "reaksi seperti".

Pendekatan 2: Menggunakan komponen pembalut

Mewujudkan komponen pembalut React memudahkan interaksi. Pembungkus ini menguruskan ref , menambah/menghilangkan pendengar acara, dan menyediakan API untuk mengakses bahagian elemen yang tidak dapat diakses. A prop, onCustomInput , mencetuskan panggilan balik dari komponen induk, secara pilihan termasuk nilai semasa ref .

 fungsi CoolInput (props) {
  const ref = useref ();
  const {Children, onCustomInput, ... Rest} = props;

  fungsi invokeCallback (event) {
    jika (onCustomInput) {
      onCustomInput (event, ref.current);
    }
  }

  useeffect (() => {
    const {current} = ref;
    current.addeventListener ('custom-input', invokeCallback);
    kembali () => {
      current.RemoveEventListener ('Custom-Input', InvokeCallback);
    };
  });

  kembali<super-cool-input ref="{ref}"> {anak}</super-cool-input> ;
}

Kaedah ini, bersama -sama dengan pembalut generik seperti reactifyLitElement , menyelaraskan integrasi.

Pendekatan 3: Memanfaatkan Pragmas JSX

JSX Pragmas menawarkan penyelesaian lain. Dengan mengimport jsx-native-events , kami menambah jenis prop yang melampirkan pendengar acara. Awalan onEvent mencetuskan tambahan pendengar acara. Ini memerlukan /** @jsx<pragma_name> */</pragma_name> Komen untuk memohon pragma.

Bagi harta benda asli yang mengikat bukannya prop react, react-bind-properties boleh digunakan.

Kod untuk pragma boleh didapati di GitHub.

Prospek masa depan

Walaupun React 17 pada mulanya dirancang untuk keserasian elemen tersuai yang lebih baik, penambahbaikan ini kelihatan tertangguh sehingga versi 18. Sehingga itu, beberapa kerja tambahan diperlukan untuk integrasi elemen penuh penuh dengan React. Mudah -mudahan, versi React Future akan menjembatani jurang ini dengan lebih berkesan.

Atas ialah kandungan terperinci 3 pendekatan untuk mengintegrasikan reaksi dengan elemen tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!