Почему document.getElementById () возвращает ноль, когда есть элемент с этим идентификатором?

Question

Я пытаюсь создать панель навигации в React с дочерним компонентом Menu, который отображает одну из двух разных версий меню в зависимости от ширины элемента div, внутри которого отображается меню. Существует также lo go и название компании, которые занимают относительно постоянную ширину в панели навигации, а div, содержащий меню, увеличивается и уменьшается, чтобы приспособиться к изменениям ширины экрана и соотношения сторон. В любом случае, этот div, который увеличивается и уменьшается, я дал id="menu-section", чтобы я мог использовать document.getElementById("menu-section").offsetWidth;, чтобы получить доступную ширину и использовать это в функции, которая решила, какую версию меню отображать. Беда в том, что я получаю TypeError: Cannot read property 'offsetWidth' of null. Почему document.getElementById("menu-section") не может найти div и вернуть ноль?

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

Функция Navbar ничего не добавляет в DOM.

Answer 3

Вам также следует рассмотреть возможность вызова функции Menu после рендеринга или определить ее в блоке afterRender().

Answer 4

Потому что не элемент с этим идентификатором, пока весь рендеринг не будет иметь закончен и результат добавлен в DOM ... но вы пытаетесь вызвать его из метода рендеринга .