import React, { useState } from "react";
import Child from "./component/Child";
const Demo: React.FC = () => {
//获取当前页面的宽高
var container: any = document.getElementById('table')
var maxWidth = container?.clientWidth
var maxHeight = container?.clientHeight
console.log(container);
console.log('maxWidth:', maxWidth);
console.log('maxHeight:', maxHeight);
const renderPage = () => {
if (...) {
return (
<>
...
</>
)
}
return (
<>
...
</>
)
}
return (
<div id='table'>
{renderTable()}
<Child/>
</div>
)
}
export default Demo
如上述代码所示,使用react函数组件写的一个页面,想使用document.getElementById获取该页面的宽高,但是打印container返回null,maxWidth和maxHeight返回undefined
请问为什么会获取不到呢,应该如何修改呢?
应该是因为获取的时候,dom还没建出来。React组件有生命周期, 改成这样试试: