Básicamente, necesito pasar un valor a mi componente web, luego le haré algo aleatorio, ahora quiero pasar ese nuevo valor a mi React Component. ¿Cómo puedo hacer eso?
function MyReactcomp() { const [state, setState] = useState("Justin is cool"); return ( <div className="Wrapper"> <customweb-component state={state} /> </div> ); }Ahora, dentro del componente web personalizado, cambiaré el estado a "¡¡No, no lo es!!". ¿Cómo puedo pasar este valor de mi componente web a mi Rea t Compmponent? Sé que puedo pasar una función porque solo puedes pasar cadenas
En lugar de consultar DOM, debe usar la referencia de Ref como se muestra a continuación:
function MyReactcomp() { const [state, setState] = useState("Justin is cool"); // Hold the web component reference here const myWebComp = useRef(); useEffect(() => { myWebComp.current?.addEventListener('tab-select', (event) => { setState(Object.keys(adminTabs[event.detail.tabIndex])); }); }, []); return ( <div className="Wrapper"> <customweb-component ref={myWebComp} state={state} /> </div> ); } Y, si necesita observar los cambios en su elemento al que se hace referencia, puede usar useState simple para mantener la referencia al elemento:
function MyReactcomp() { const [state, setState] = useState("Justin is cool"); // Hold the web component reference here const [webComp, setWebComp] = useState(null); useEffect(() => { webComp?.addEventListener('tab-select', (event) => { setState(Object.keys(adminTabs[event.detail.tabIndex])); }); }, [webComp]); return ( <div className="Wrapper"> <customweb-component ref={setWebComp} state={state} /> </div> ); }Si encuentra que hace esto demasiadas veces, puede abstraer este comportamiento en ganchos personalizados. Por ejemplo:
function useWebCompProp(ref, initialValue) { const [state, setState] = useState(initialValue); useEffect(() => { ref.current?.addEventListener('onState', (event) => { // Update the state here setState(event.detail); }); }, []); const setter = (newState) => { setState(newState); ref.current?.state = newState; }; return [state, setter]; } function useWebCompEvent(eventName, callback) { // Hold the web component reference here const myWebComp = useRef(); useEffect(() => { myWebComp.current?.addEventListener(eventName, callback); }, []); return myWebComp; } function MyReactcomp() { const myWebComp = useWebCompEvent(eventName, (event) => { setState(Object.keys(adminTabs[event.detail.tabIndex])); }); const [state, setState] = useWebCompProp(myWebComp, "Justin is cool"); return ( <div className="Wrapper"> <customweb-component ref={myWebComp} /> </div> ); }En reacción, la transferencia de datos es unidireccional, es decir, de padre a hijo. Sin embargo, si necesita tener un controlador en el elemento principal para algún cambio de datos en el elemento secundario, puede usar Lifting Up State This podría ayudar a lograr lo que necesita.
De lo contrario, proporcione más detalles sobre el escenario real del caso.
Descubrí que necesita adjuntar un controlador de eventos personalizado a un elemento en su plantilla Lit-html. Luego puede usar getElementById o algo por el estilo y escuchar el evento en el componente principal.
Esta es una combinación de mi respuesta y la de Harshal Patil. Él tuvo en cuenta que usar las funciones integradas de Reacts para manipular el DOM es preferible a manipularlo directamente.
import React, { useEffect, useRef } from 'react'; function MyReactcomp() { const [state, setState] = useState("Justin is cool"); const webCompRef = useRef(); useEffect(() => { webCompRef.addEventListener('tab-select', (event) => { setState("No he is not!!") }) }, []} return ( <div className="Wrapper"> <customweb-component ref={webCompRef} state={state} /> </div> ); }Este patrón le permitirá pasar sus datos a través de los atributos de los componentes web. A continuación, puede escuchar sus eventos nativos o personalizados. Esto es genial porque ahora los componentes pueden cruzar marcos y bibliotecas, si un equipo usa React y el otro usa Angular, pueden compartir componentes y mantener la interfaz de usuario sincronizada.