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组件有生命周期， 改成这样试试：

const Demo: React.FC = () => {

useEffect(() => {
    const container: any = document.getElementById('table')
    console.log(container);
  },
  []
);

 return ( <div id='table'></div>)

}

应该在组件渲染完成之后的生命周期函数内获取dom