Tengo el siguiente cuadro de diálogo donde wrapperRefPopup tiene un ancho en porcentaje-
<BootstrapDialog style={{height:'auto', zIndex:500}} aria-labelledby="customized-dialog-title" open={true} > <IconButton aria-label="close" onClick={closeModal} sx={{ position: 'absolute', right: 8, top: -5, color: (theme) => theme.palette.grey[500], }} > <CloseIcon fontSize="medium" style={{paddingTop:"0.5rem", paddingRight:'0.2rem', color:'#000'}} /> </IconButton> <Typography component="div" sx={{ minWidth: '45rem', marginLeft: '4rem', marginRight: '4rem', paddingTop: '1.5rem', }}> <div> <svg ref={svgColorCodeRefPopup} style={{width:"-webkit-fill-available"}}> </svg> </div> <div ref={wrapperRefPopup} style={{ width: "100%", height: "12.5rem", marginBottom: "2rem" }} > <svg ref={svgRefPopup} style={{ width: "100%", height: "110%",marginTop:"0%" }}> <g className="x-axis" /> <g className="y-axis" /> </svg> </div> </Typography> </BootstrapDialog>Para el propósito del gráfico, quiero calcular el ancho en useEffect, que estoy tratando de calcular a través de
const svgRefPopup = useRef(); const svgColorCodeRefPopup=useRef(); const wrapperRefPopup = useRef(); useEffect(() => { const svg = select(svgRefPopup.current); const svgColorCode=select(svgColorCodeRefPopup.current); const { width, height } = wrapperRefPopup.current?.getBoundingClientRect?.()||0; ... ... },[]);Cuando trato de consolar el ancho y el alto del registro, no estoy definido.
¿Cómo puedo obtener la altura y el ancho de div dentro del cuadro de diálogo de arranque?
El problema será que su wrapperRefPopup.current se vuelve indefinido inicialmente y está retrocediendo a 0, leyendo 0.width/0.height no está definido. Normalmente, las referencias deben ser accesibles en el primer efecto de uso. Esto podría tener algo que ver con el componente de diálogo. Para asegurarse de que su referencia esté configurada cada vez que recomiendo usar useState en lugar de useRef y tenerlo en el departamento de useEffect.
const [wrapperPopup, setWrapperPopup] = useState(null) useEffect(() => { if(wrapperPopup) { const { widht, height } = wrapperPopup.getBoundingClientRect() } }, [wrapperPopup]) ... <div ref={setWrapperPopup}> ...}
Puede obtener el width y la height a través del gancho useRef , así:
// ... const wrapperRefPopup = useRef(); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); useEffect(() => { if (wrapperRefPopup.current) { setWidth(wrapperRefPopup.current.clientWidth); setHeight(wrapperRefPopup.current.clientHeight); } }, []); // ...Este es un problema con BootstrapDialog
Mantuve debajo del código [Código real para gráficos] en un componente separado-
<Typography component="div" sx={{ minWidth: '45rem', marginLeft: '4rem', marginRight: '4rem', paddingTop: '1.5rem', }}> <div> <svg ref={svgColorCodeRefPopup} style={{width:"-webkit-fill-available"}}> </svg> </div> <div ref={wrapperRefPopup} style={{ width: "100%", height: "12.5rem", marginBottom: "2rem" }} > <svg ref={svgRefPopup} style={{ width: "100%", height: "110%",marginTop:"0%" }}> <g className="x-axis" /> <g className="y-axis" /> </svg> </div> </Typography> Representé este componente separado que tiene el código anterior del componente actual que tiene BootstrapDialog
<BootstrapDialog style={{height:'auto', zIndex:500}} aria-labelledby="customized-dialog-title" open={true} > <IconButton aria-label="close" onClick={closeModal} sx={{ position: 'absolute', right: 8, top: -5, color: (theme) => theme.palette.grey[500], }} > <CloseIcon fontSize="medium" style={{paddingTop:"0.5rem", paddingRight:'0.2rem', color:'#000'}} /> </IconButton> **<SeparateComponent>** </BootstrapDialog>Así funcionó.