React实现7段LED数码管显示组件多数字输入渲染异常问题

问题原因 #

1. Numbers组件中使用全局document.querySelector()获取数码段元素，当页面存在多个数码管实例时，只会命中第一个组件内的对应元素，所有数字的样式修改都会作用在同一个数码管上，引发多数字渲染异常。
2. 现有逻辑只叠加segment-disabled禁用类，没有在数字更新时清除旧的禁用类，即使单数字切换场景也会出现样式残留。
3. 直接操作原生DOM不符合React的声明式开发规范，容易出现状态和视图不同步的问题。

修复方案 #

推荐用React声明式的类名绑定逻辑替换原生DOM操作，根据传入的数字直接计算每个数码段的类名，完全避免全局DOM查询冲突：

const Numbers = ({ singleNumber }) => {
    // 定义每个数字对应的需要熄灭的数码段，覆盖0-9全量规则
    const getDisabledSegments = (num) => {
        switch(num) {
            case 0: return ['g'];
            case 1: return ['a', 'd', 'e', 'f', 'g'];
            case 2: return ['c', 'f'];
            case 3: return ['e', 'f'];
            case 4: return ['a', 'd', 'e'];
            case 5: return ['b', 'e'];
            case 6: return ['b'];
            case 7: return ['d', 'e', 'f', 'g'];
            case 8: return [];
            case 9: return ['e'];
            default: return [];
        }
    };

    const disabledSegments = getDisabledSegments(singleNumber);
    // 工具函数判断当前段是否需要添加禁用类
    const getSegmentClass = (segmentName) => {
        return `segment segment-${segmentName} ${disabledSegments.includes(segmentName) ? 'segment-disabled' : ''}`;
    };

    return (
        <div className="container">
            <div className={getSegmentClass('a')}></div>
            <div className={getSegmentClass('b')}></div>
            <div className={getSegmentClass('c')}></div>
            <div className={getSegmentClass('d')}></div>
            <div className={getSegmentClass('e')}></div>
            <div className={getSegmentClass('f')}></div>
            <div className={getSegmentClass('g')}></div>
        </div>
    )
}

修改后直接删除原有useEffect和switchDisabled逻辑即可，不需要额外做DOM操作，多数码管实例之间不会互相干扰，数字切换时也会自动重新计算类名，不会有样式残留问题。

如果确实需要保留原生DOM操作的写法，可以给组件容器绑定useRef，限定查询范围在当前组件内部：

const Numbers = ({ singleNumber }) => {
    const containerRef = useRef(null);

    const switchDisabled = (element) => {
        // 先清空所有段的禁用类，避免样式残留
        containerRef.current.querySelectorAll('.segment').forEach(el => el.classList.remove('segment-disabled'));
        // 仅在当前组件容器内查询元素，不会命中其他组件的数码段
        const segmentB = containerRef.current.querySelector('.segment-b');
        const segmentC = containerRef.current.querySelector('.segment-c');        
        const segmentF = containerRef.current.querySelector('.segment-f');        

        switch(element) {
            case 2:
                segmentC.classList.add('segment-disabled');
                segmentF.classList.add('segment-disabled');
                break;
            case 6:
                segmentB.classList.add('segment-disabled');
                break;            
            default:                
                break;
        }
    }

    useEffect(() => {
        switchDisabled(singleNumber);
    }, [singleNumber]);

    return (
        <div className="container" ref={containerRef}>
            <div className="segment segment-a"></div>
            <div className="segment segment-b"></div>
            <div className="segment segment-c"></div>
            <div className="segment segment-d"></div>
            <div className="segment segment-e"></div>
            <div className="segment segment-f"></div>
            <div className="segment segment-g"></div>
        </div>
    )
}

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