Tengo el siguiente problema:
Tengo un componente Sidebar en el que generé tres botones a través de la función map(). Puse los botones en una cuadrícula MUI y apliqué estilo en esta cuadrícula.
const Sidebar = () => { const classes = useStyles() const navigate = useNavigate() return ( <Grid container className={classes.containerStyling} direction="column"> <Grid item className={classes.gridItemStyling}> {insurances.map((item, index) => <Button key={index} className={classes.buttonListStyling}> <Grid container direction="column" className={classes.listItemStyling}> <Grid item> <Typography variant="h2"> {item.headline} </Typography> </Grid> </Grid> </Button>)} </Grid> </Grid> ) } export default SidebarAhora me gustaría mostrar un título junto a mi barra lateral según el botón en el que se haga clic. El Titular tendrá su propio estilo. Sé que necesito un gancho:
const [hasRender, setRender] = useState(false); const onShow = React.useCallback(() => setRender(true), []) <Button key={index} className={classes.buttonListStyling} onClick={onShow}> </Button>Luego tengo que verificar si 'visible' es verdadero y renderizar mi Componente.
{visible && <HeadlineContent/>}El problema es que todo el estilo de la barra lateral se aplica en el componente HeadlineContent y no puedo averiguar cómo representar el componente fuera de la cuadrícula para que se aplique el estilo correcto.
¿Y cómo puedo acceder al texto de los botones para crear dinámicamente el titular con el mismo texto?
Espero que sea comprensible.
Dado que mencionó que desea representar su <HeadlineContent /> junto a su barra lateral, probablemente tendrá un componente de nivel superior que represente los dos. Esto significa que este componente de nivel superior es responsable de mantener su estado isVisible , ya que se establece dentro de <Sidebar /> , pero se usa fuera de él. Su <Sidebar /> solo debe contener una devolución de llamada simple para los botones, que se implementarán en su componente de nivel superior. Lo que hacen estas devoluciones de llamada es simplemente configurar el texto que necesita mostrar en un estado local en su componente de nivel superior. También puede usar el texto como una bandera para mostrar el título, si no desea implementar una opción para mostrar/ocultar el título. Se vería algo como a continuación:
const Comp = () => { const [headline, setHeadline] = useState(''); const onHeadlineChange = useCallback((newHeadline) => { setHeadline(newHeadline); }, [setHeadline]); return ( <> <Sidebar onHeadlineChange={onHeadlineChange} /> {headline && <HeadlineContent headline={headline} />} </> ) }Observe que el ejemplo que proporcionó:
const [hasRender, setRender] = useState(false); const onShow = React.useCallback(() => setRender(true), []) <Button key={index} className={classes.buttonListStyling} onClick={onShow}> </Button> no necesita el useCallback , ya que la devolución de llamada no se transmitirá a ningún otro componente secundario.
Si su objetivo es tener el componente <HeadlineContent /> directamente dentro del componente <Sidebar /> , puede mover el estado y la devolución de llamada de mi ejemplo anterior dentro del componente <Sidebar /> y eliminar el contenedor useCallback , ya que no no ser necesario.