當存在具有該 ID 的元素時，為什么 document.getElementById() 返回 null？

Question

我正在嘗試在 React 中構建一個導航欄，該導航欄有一個子組件Menu ，它根據菜單在其中呈現的 div 上的寬度呈現兩個不同版本的菜單之一。 還有一個徽標和公司名稱在導航欄中占據相對恆定的寬度，並且保存菜單的 div 會隨着屏幕寬度和縱橫比的變化而增長和縮小。 無論如何，那個增長和縮小的 div 我給了一個id="menu-section"以便我可以使用document.getElementById("menu-section").offsetWidth; 獲取可用寬度並在決定渲染哪個版本的菜單的 function 中使用它。 問題是我得到一個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;

Answer 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

Answer 2

因為在所有渲染完成並將結果添加到 DOM 之前，沒有具有該 ID 的元素……但是您正試圖從 render 方法中調用它。

Answer 3

您還應該考慮在渲染后調用菜單 function，或者在afterRender()塊中定義它。

Answer 4

Navbar導航欄不會向 DOM 添加任何內容。