Estoy tratando de hacer que la cuadrícula dinámica cambie el tamaño cambiando el valor de lgEditorSize usando la acción onClick para reaccionar y código mecanografiado.
Declarar el valor inicial de lgEditorSize
const x: any = {}; x.lgEditorSize=6;Cambiar el valor de lgEditorSize
<Box display='flex' justifyContent='right'> <span>Show or hide the sidebar using</span> <Button onClick={() => {x.lgEditorSize=12;}}> <ArrowBackIosIcon/> </Button> <Button onClick={() => {x.lgEditorSize=6;}}> <ArrowForwardIosIcon/> </Button> <span>Button</span> </Box> <GridContainer> <Grid item lg={x.lgEditorSize}> Contents </Grid> <GridContainer>El valor se cambia pero la cuadrícula no se redimensiona. ¿Alguna idea para cambiar el tamaño de la cuadrícula usando la acción del botón?
Está cambiando la variable, pero el Componente no se vuelve a representar porque no sabe que necesita hacerlo. Para lograr re-renderizaciones, necesita usar el estado, porque React es lo suficientemente inteligente como para saber que cuando un estado cambia, todos los componentes que usan ese estado deben volver a renderizarse.
Debe colocar lgEditorSize en un estado y usar la variable de estado. Se vería algo como esto.
const [lgEditorSize, setLgEditorSize] = useState<GridSize>(6); <Box display='flex' justifyContent='right'> <span>Show or hide the sidebar using</span> <Button onClick={() => setLgEditorSize(12)}> <ArrowBackIosIcon/> </Button> <Button onClick={() => setLgEditorSize(6)}> <ArrowForwardIosIcon/> </Button> <span>Button</span> </Box> <GridContainer> <Grid item lg={lgEditorSize}> Contents </Grid> <GridContainer> Puede leer más sobre el state y el ciclo de vida del componente React aquí: https://reactjs.org/docs/state-and-lifecycle.html