当存在具有该 ID 的元素时，为什么 document.getElementById() 返回 null？答案

【问题标题】：Why is document.getElementById() returning null when there is an element with that Id?当存在具有该 ID 的元素时，为什么 document.getElementById() 返回 null？
【发布时间】：2020-04-13 03:08:33
【问题描述】：

我正在尝试在 React 中构建一个导航栏，它有一个子组件 Menu，它根据菜单在其中呈现的 div 的宽度呈现两个不同版本的菜单之一。还有一个徽标和公司名称在导航栏中占据相对恒定的宽度，并且保存菜单的 div 会随着屏幕宽度和纵横比的变化而增长和缩小。无论如何，那个增长和缩小的 div 我给了一个id="menu-section"，以便我可以使用document.getElementById("menu-section").offsetWidth; 来获取可用宽度并在决定要呈现哪个版本的菜单的函数中使用它。问题是我得到了TypeError: Cannot read property 'offsetWidth' of null。为什么document.getElementById("menu-section") 找不到 div 并返回 null？

function Menu(props) {
    let availableWidthPx = document.getElementById("menu-section").offsetWidth;
    if (availableWidthPx > 600) {
        return expanded version;
    }
    return collapsed version
}

function Navbar(props) {
    render(){
        return (
            <nav className="navbar">
                ...
                <div id="menu-section">
                    <Menu />
                </div> 
            </nav>
        )
    }
}
export default Navbar;

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

因为 DOM 尚未加载。以下是解决方法：

function Menu(props) {
  React.useEffect(() => {
    let availableWidthPx = document.getElementById("menu-section");
    if (availableWidthPx) {
      console.log(availableWidthPx.offsetWidth);
    }

  }, [])

 return <div>Hello</div>;
}

另外，您的Navbar 功能组件只需要return，而不是render

【讨论】：

这非常有帮助，但我需要能够在调用 React.useEffect()... 之外使用 availableWidthPx ...返回语句所在的位置。所以我取出let availableWidthPx 并在调用 React.useEffect() 之前将其声明为 0，然后尝试在 React.useEffect() 内重新分配它的值，它就 console.log() 而言工作但在此之外它保留值 0 的方法。

【解决方案2】：

因为在所有渲染完成完成并将结果添加到 DOM 之前，没有一个具有该 ID 的元素……但您正试图从渲染方法。

【讨论】：

【解决方案3】：

您还应该考虑在渲染后调用 Menu 函数，或者在 afterRender() 块中定义它。

【讨论】：

【解决方案4】：

函数 Navbar 不会向 DOM 添加任何内容。

【讨论】：

很好，我不知道这种语法。我更新了我的答案。