Tal como dice el título, tengo 2 componentes personalizados en una página en una aplicación NextJS simple:
<section> <CompA></CompA> <CompB></CompB> </section>¿Cómo puedo hacer que un botón en CompB active una función contenida en CompA?
Supongo que debería usar el estado de alguna manera, pero estoy un poco perdido sobre cómo hacerlo en NextJS. Ejemplo de código simple aquí: https://github.com/Chenzo/nextjs-comp-to-comp
Técnicamente, puedes hacer esto con el gancho useImperativeHandle , pero esta no es exactamente la "manera de reaccionar":
const CompA = forwardRef(({ children }, ref) => { useImperativeHandle(ref, () => ({ doSmth: () => { console.log('CompA - function'); }, })); return ( <div> <h2>Component A</h2> </div> ); }); const CompB = ({ onClick }) => { return ( <div> <h2>Component B</h2> <button onClick={onClick}>Trigger CompA function</button> </div> ); }; export default function Home() { const compARef = useRef(); const handleCompBClick = useCallback(() => compARef.current?.doSmth(), []); return ( <section> <CompA ref={compARef}></CompA> <CompB onClick={handleCompBClick}></CompB> </section> ); }Como escribí anteriormente, lo más probable es que haya una forma más correcta de resolver su problema, evitando el enfoque imperativo. La decisión dependerá de qué harán exactamente los componentes A y B en una aplicación real.