document.getElementById返回null

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

请问为什么会获取不到呢,应该如何修改呢?

阅读 5.7k
2 个回答

应该是因为获取的时候,dom还没建出来。React组件有生命周期, 改成这样试试:

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

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

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

}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏