以百分比设置时如何在对话框中查找div的高度和宽度

Question

I have below dialog where wrapperRefPopup has width in percentage-

<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>

For chart purpose , I want to calculate width in useEffect , which I am trying to calculate through-

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;

    ...
    ...

},[]);

When I try to console log width and height , I get undefined.

How can I get the height and width of div within bootstrap dialog?

Answer 1

The problem will be that your wrapperRefPopup.current becomes undefined initially and youre fallbacking to 0, reading 0.width/0.height is undefined. Normally refs should be accessable in first useEffect. This might have something to do with the dialog component. To insure your ref is set everytime I'd recommend to use useState instead of useRef and have it in the useEffect dep.

const [wrapperPopup, setWrapperPopup] = useState(null)

useEffect(() => {
 if(wrapperPopup) {
  const { widht, height } = wrapperPopup.getBoundingClientRect()
 }
}, [wrapperPopup])
...

<div ref={setWrapperPopup}>
...

}

Answer 2

You can get the width and height via the useRef hook, like so:

// ...
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);
    }
}, []);

// ...

Answer 3

This is issue with BootstrapDialog

I kept below code [Actual code for charts] in separate component-

 <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>

I rendered this separate component having above code from current component having 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>

This way it worked.