如何在React.js中选择元素？解决控制台输出null问题

你用document.getElementById("menu-list-container")得到null，核心原因是React 18的createRoot().render()是异步执行的——你调用render后立刻查询DOM，此时组件还没完成挂载，目标元素还未被添加到DOM树里，自然查不到。

React专门为函数式组件提供了获取DOM元素的方案：useRef钩子，这是符合React设计理念的方式，能避免直接操作原生DOM带来的冲突问题。

具体实现步骤 #

1. 从react导入useRef和useEffect（useEffect用于在组件挂载完成后执行操作）
2. 在组件内部创建ref对象，用于关联目标DOM元素
3. 将ref绑定到你要获取的元素上
4. 在useEffect中访问ref的current属性，拿到对应的DOM元素

修改后的代码示例 #

import { useRef, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

let menuIcon = <i className=" bi bi-list" id="menu-icon"></i>;
let cvIcon = <i className="bi bi-caret-down-fill"></i>;

export default function Navbar() {
    // 创建ref对象
    const menuListRef = useRef(null);

    // 组件挂载完成后执行
    useEffect(() => {
        // 此时DOM已渲染，ref.current能拿到目标元素
        console.log(menuListRef.current);
        // 这里可以对元素进行操作
    }, []); // 空依赖数组确保只在挂载后执行一次

    return (
        <nav>
            <div id="menu">
                {menuIcon}
                {/* 将ref绑定到目标元素 */}
                <div id="menu-list-container" ref={menuListRef}>
                  <a href="#about">ABOUT</a>
                  <a href="#stack">STACK</a>
                  <a href="#contact">CONTACT</a>
                  <a href="#project">PROJECTS</a>
                </div>
            </div>

            <div id="logo">
                <span id="v">V</span>
                <span id="s">S</span>
                <span id="c">C</span>
            </div>
            
            <div id="cv-container">
                <button>
                    <input type="button" name="cv-btn" value="RESUME" id="cv-btn"/>
                    {cvIcon}
                </button>
                <div>
                    <a href="">Download CV</a>
                    <a href="">View CV</a>
                </div>
            </div>
        </nav>
    );
}

const root = document.getElementById("root");
createRoot(root).render(<Navbar></Navbar>);

额外说明 #

• 尽量避免直接使用document.getElementById这类原生DOM操作，因为React的虚拟DOM更新机制可能会覆盖原生操作的结果，引发不可预期的问题。
• 如果确实需要直接操作DOM，一定要在组件挂载完成后（比如useEffect的回调里）执行，确保元素已存在于DOM树中。

内容的提问来源于stack exchange，提问作者Vsimdy