Mi componente principal parece
<Tabs tabs={[ { id: "Comp1", content: ( <Comp1/> ), }, { id: "Comp2", content: ( <Comp2/> ), }, ]} />¿El requisito es ejecutar una función en comp1 al hacer clic en un botón en comp2?
¿Cuál es la mejor manera de manejar tales situaciones?
No estoy muy inclinado a manejarlo a través de redux-store, y tengo dudas sobre pasarlo a través de accesorios.
Aquí hay un ejemplo, en este escenario, Child ejecutará alguna función (que enfoca una entrada) desde el componente FancyInput , al hacer clic en div .
function FancyInput(props, ref) { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focusInput: () => { inputRef.current.focus(); }, })); return <input ref={inputRef} />; } FancyInput = forwardRef(FancyInput); let Child = (props) => { return <div onClick={props.callback}>Hello</div>; }; export default function App() { let inputRef = useRef(); let callback = () => inputRef.current.focusInput(); return ( <div> <FancyInput ref={inputRef} /> <Child callback={callback} /> </div> ); }Una de las soluciones es mejorar y definir la función de comp1 dentro del componente principal y luego pasarla a los componentes secundarios comp1 y comp2 .
De esta forma, comp2 y comp1 pueden acceder a la función.