Ya entiendo el concepto de Forwarding Refs y react-router-dom. Pero en esta implementación, no estoy seguro de cómo usarlo correctamente. Tengo un componente secundario, donde hay una función que establece un valor nulo en un estado de uso. Quiero que esta función se ejecute cada vez que hago clic en el elemento del menú que representa este componente secundario. Este menú está montado en la lista com y el enrutador en la aplicación, como se muestra en los 3 archivos a continuación. Precisamente, no sé dónde poner el useRef para ejecutar la función secundaria resetMyState, si está en App.js o AppBarAndDrawer.js y cómo hacerlo.
childComponent.js
... const MeusAnuncios = forwardRef((props, ref) => { const [myState, setMyState] = useState(null); function resetMyState(){ setMyState(null) } async function chargeMyState() { await ... setMyState(values) ... } ...AppBarAndDrawer.js
... const drawer = ( <div> <div className={classes.toolbar} /> <Divider /> <List> {[ { label: "Minha Conta", text: "minhaConta", icon: "person" }, { label: "Novo Anúncio", text: "novoAnuncio", icon: "queue_play_next" }, { label: "Meus Anúncios", text: "meusAnuncios", icon: "dvr" }, { label: "Estatísticas", text: "estatisticas", icon: "line_style" }, { label: "Faturamento", text: "faturamento", icon: "local_atm" }, { label: "childComponent", text: "childComponent", icon: "notifications" }, ].map(({ label, text, icon }, index) => ( <ListItem component={RouterLink} selected={pathname === `/${text}`} to={`/${text}`} button key={text} disabled={text !=='minhaConta' && !cadCompleto ? true : false} onClick={() => {click(text) }} > <ListItemIcon> <Icon>{icon}</Icon> </ListItemIcon> <ListItemText primary={label.toUpperCase()} /> </ListItem> ))} </List> <Divider /> </div> ); return( ... {drawer} ... ) ...Aplicación.js
... export default function App() { const childRef = useRef(); ... <Router> <AppBarAndDrawer/> <Switch> <Route path="/childComponent"> <childComponent /> </Route> ... ...La ref que cree debe residir en un ancestro común, es decir, la App , por lo que se puede pasar una devolución de llamada a los componentes secundarios. La ref a ChildComponent y la devolución de llamada a AppBarAndDrawer . Además, ChildComponent necesitará usar el gancho useImperativeHandle para exponer el controlador resetMyState del niño.
MeusAnuncios
Use el useImperativeHandle para exponer el controlador resetMyState .
const MeusAnuncios = forwardRef((props, ref) => { const [myState, setMyState] = useState(null); function resetMyState(){ setMyState(null); } useImperativeHandle(ref, () => ({ resetMyState, })); async function chargeMyState() { await ... setMyState(values) ... } ... });aplicación
Cree una devolución de llamada resetChildState y pase la referencia al componente secundario y la devolución de llamada al componente AppBarAndDrawer .
export default function App() { const childRef = useRef(); const resetChildState = () => { if (childRef.current.resetMyState) { childRef.current.resetMyState(); } }; ... <Router> <AppBarAndDrawer onClick={resetChildState} /> // <-- pass callback <Switch> <Route path="/childComponent"> <ChildComponent ref={childRef} /> // <-- pass ref </Route> ... </Switch> ... </Router> }AppBarAndDrawer
Consumir y llamar a la devolución de llamada pasada.
const AppBarAndDrawer = ({ onClick }) => { // <-- destructure callback ... const drawer = ( <div> ... <List> {[ ... ].map(({ label, text, icon }, index) => ( <ListItem component={RouterLink} selected={pathname === `/${text}`} to={`/${text}`} button key={text} disabled={text !=='minhaConta' && !cadCompleto} onClick={() => { click(text); onClick(); // <-- call callback here }} > <ListItemIcon> <Icon>{icon}</Icon> </ListItemIcon> <ListItemText primary={label.toUpperCase()} /> </ListItem> ))} </List> ... </div> ); ... };