Добавление функций в освещенные веб-компоненты в реакции с машинописным текстом
У меня есть веб-компонент, который я создал в lit, который принимает функцию в качестве входной опоры. но функция не запускается из компонента реакции.
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.info("add some logic here");
}
return(<webcomponents-widgets var1 = "test" successCallBack = {onSuccessCallback}></webcomponents-widgets>)
}
Как я могу запустить функцию в реагирующем компоненте? Я пробовал это vue 3 и работает как положено.
Я что-то пропустил?
Ответы 2
React не поддерживает веб-компоненты так же хорошо, как другие фреймворки (но планируется улучшить в будущем).
Здесь происходит то, что ваш параметр successCallBack преобразуется в строку. Вам нужно настроить ссылку на свой веб-компонент и установить successCallBack из useEffect:
const App = () => {
const widgetRef = useRef();
const onSuccessCallback = () =>{
console.info("add some logic here");
}
useEffect(() => {
if (widgetRef.current) {
widgetRef.current.successCallBack = onSuccessCallback;
}
}, []);
return(<webcomponents-widgets var1 = "test" ref = {widgetRef}></webcomponents-widgets>)
}
Как указано в этом ответе, в настоящее время React не обрабатывает реквизиты функций для веб-компонентов должным образом.
Хотя можно использовать ref для императивного добавления свойства функции, я бы предложил более идиоматический способ выполнения действий в веб-компонентах — не использовать функцию в качестве реквизита, а скорее заставить веб-компонент отправлять событие «успех» и потребителю написать обработчик события.
Итак, реализация <webcomponents-widgets> вместо вызова
this.successCallBack();
вместо этого сделал бы
const event = new Event('success', {bubbles: true, composed: true});
this.dispatch(event);
Затем в свой компонент React вы можете добавить прослушиватель событий.
const App = () => {
const widgetRef = useRef();
const onSuccessCallback = () => {
console.info("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 позволяет обернуть веб-компонент, превратив его в компонент React, чтобы вы могли выполнять такую обработку событий декларативно.