reactjs - React ile TypeScript kullanarak lit web bileşenlerine fonksiyon eklemek

Lit ile oluşturduğum bir web bileşenim var, bu bileşen bir işlevi girdi özelliği olarak alıyor. Ama işlev React bileşeninden tetiklenmiyor.

import React, { FC } from 'react';
import '@webcomponents/widgets'
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'webcomponents-widgets': WidgetProps
        }
    }
}
interface WidgetProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
    var1: string,
    successCallback: Function,
}
const App = () =>{
   const onSuccessCallback = () =>{
       console.log("add some logic here");
   }
   return(<webcomponents-widgets var1="test" successCallBack={onSuccessCallback}></webcomponents-widgets>)
}

React bileşeninde fonksiyonu nasıl tetikleyebilirim? Bunu Vue 3'te denedim ve beklendiği gibi çalışıyor.

Bir şeyi mi kaçırıyorum?

Cevap #1

Bu cevapta belirtildiği gibi, React şu anda web bileşenleri için işlevsel özellikleri düzgün şekilde işlememektedir.

Bir ref kullanarak işlev özelliğini zorunlu olarak eklemek mümkün olsa da, web bileşenlerinde işlerin daha yerleşik yolu olarak işlevi bir prop olarak almak yerine, web bileşeninin "başarı" durumunda bir olay göndermesi ve tüketicinin bir olay işleyici yazmasıdır.

Yani <webcomponents-widgets> öğesinin uygulanması, çağırmak yerine

this.successCallBack();

yerine yapardı

const event = new Event('success', {bubbles: true, composed: true});
this.dispatch(event);

Sonra, React bileşeninizde olay dinleyicisini ekleyebilirsiniz.

const App = () => {
  const widgetRef = useRef();
  const onSuccessCallback = () => {
    console.log("add some logic here");
  }
  useEffect(() => {
    widgetRef.current?.addEventListener('success', onSuccessCallback);
    return () => {
      widgetRef.current?.removeEventListener('success', onSuccessCallback);
    }
  }, []);
  return(<webcomponents-widgets var1="test" ref={widgetRef}></webcomponents-widgets>);
}

@lit-labs/react paketi, web bileşenini sarmanıza olanak tanır ve onu bir React bileşenine dönüştürür, böylece bu tür olay işlemlerini deklaratif olarak yapabilirsiniz.

Cevap #2

React, Web Bileşenlerini diğer çerçeveler kadar iyi yönetmez (ancak gelecekte iyileştirilmesi planlanıyor).

Burada olan, successCallBack parametrenizin bir stringe dönüştürülmesidir. Web bileşeniniz üzerinde bir ref oluşturmanız ve useEffect içinde successCallBack'i ayarlamanız gerekir:

const App = () => {
   const widgetRef = useRef();
   const onSuccessCallback = () =>{
       console.log("add some logic here");
   }
   useEffect(() => {
      if (widgetRef.current) {
         widgetRef.current.successCallBack = onSuccessCallback;
      }
   }, []);
   return(<webcomponents-widgets var1="test" ref={widgetRef}></webcomponents-widgets>)
}

İlgili makaleler