以百分比設定時如何在對話框中查找div的高度和寬度

我有下面的對話框，其中wrapperRefPopup有百分比寬度-

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

出于圖表目的，我想計算 useEffect 中的寬度，我試圖通過 -

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;

    ...
    ...

},[]);

當我嘗試控制日志寬度和高度時，我得到了未定義。

如何在引導對話框中獲取 div 的高度和寬度？

uj5u.com熱心網友回復：

問題將是您的 wrapperRefPopup.current 最初變得未定義并且您回退到 0，讀取 0.width/0.height 未定義。通常 refs 應該可以在第一次 useEffect 中訪問。這可能與對話框組件有關。為了確保每次都設定您的 ref，我建議使用 useState 而不是 useRef 并將其放在 useEffect dep 中。

const [wrapperPopup, setWrapperPopup] = useState(null)

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

<div ref={setWrapperPopup}>
...

}

uj5u.com熱心網友回復：

您可以通過鉤子獲取widthand ，如下所示：heightuseRef

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

// ...

uj5u.com熱心網友回復：

這是問題BootstrapDialog

我在單獨的組件中保留了以下代碼[圖表的實際代碼]-

 <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

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

這樣它就起作用了。

標籤：javascript html jQuery 反应 d3.js

上一篇：如何僅在d3.js(v7)中的折線圖中縮放X軸

下一篇：為什么d3行生成器在往返0或兩者時失敗