React轮播组件报错：Cannot read properties of null (reading 'style')

错误原因 #

你直接在组件顶层执行document.getElementById("containerImgCurriculo")，此时React还未完成DOM渲染，获取到的元素是null，后续点击按钮调用moverEsquerda/moverDireita时，访问null.style就会触发这个类型错误。另外，用let声明的dermarcadorPosiSlider和imgSelecionada不是响应式状态，组件重新渲染时会重置值，也会导致轮播逻辑异常。

修正方案 #

• 用useRef获取DOM元素：React中推荐用useRef获取DOM节点，它能在组件生命周期内保持对元素的引用，不会因为渲染重置。
• 用useState管理轮播状态：将dermarcadorPosiSlider和imgSelecionada改成响应式状态，确保状态变化能触发组件更新，同时保留正确的轮播位置。
• 避免直接操作DOM样式：通过状态控制style属性，让React处理DOM更新，符合React数据流模式。

修正后的完整代码 #

import { useState, useRef } from 'react';

const App2 = () => {
    // 用useRef绑定轮播容器
    const containerRef = useRef<HTMLDivElement>(null);
    // 用useState管理轮播位置和选中图片状态
    const [dermarcadorPosiSlider, setDermarcadorPosiSlider] = useState(550);
    const [imgSelecionada, setImgSelecionada] = useState(1);

    function moverEsquerda() {
        let newPosition = dermarcadorPosiSlider + 500;
        let newSelected = imgSelecionada - 1;

        if (newPosition > 550) {
            newPosition = -3950;
            newSelected = 10; // 对应最后一张图，根据图片数量调整
        }

        setDermarcadorPosiSlider(newPosition);
        setImgSelecionada(newSelected);
    }

    function moverDireita() {
        let newPosition = dermarcadorPosiSlider - 500;
        let newSelected = imgSelecionada + 1;

        if (newPosition < -3950) {
            newPosition = 550;
            newSelected = 1;
        }

        setDermarcadorPosiSlider(newPosition);
        setImgSelecionada(newSelected);
    }

    return (
        <>
            <div>
                {/* 通过ref绑定容器，用状态控制样式 */}
                <div 
                    ref={containerRef}
                    style={{
                        marginLeft: `${dermarcadorPosiSlider}px`,
                        transition: '1s'
                    }}
                >
                    <div><ImgCurriculo imgImgCurriculo={logoHTML} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoJavaScript} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoCss} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoTypeScript} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoReact} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoPython} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoGit} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoMySql} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoVite} /></div>
                    <div><ImgCurriculo imgImgCurriculo={logoOffice} /></div>
                </div>

                <div>
                    <div onClick={moverEsquerda}>
                        <img src={seta} alt="向左切换" />
                    </div>
                    <div onClick={moverDireita}>
                        <img src={seta} alt="向右切换" />
                    </div>
                </div>
            </div>
        </>
    )
}

export default App2

额外说明 #

• 修正后的代码移除了直接操作DOM的逻辑，完全通过React状态控制样式，符合声明式编程理念。
• useRef确保DOM渲染完成后能获取到正确的容器元素，不会出现null的情况。
• 状态更新会自动触发组件重新渲染，保持轮播状态的一致性。

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