React中根据元素自身位置动态修改样式报错求助

你这段代码报错的核心原因是组件首次渲染时，ref还没完成DOM元素的绑定，card.current此时是null，直接调用getBoundingClientRect()自然会触发"Cannot read properties of null"的错误。而且就算ref绑定成功了，当前写法也只会在组件首次渲染时计算一次透明度，无法随着页面滚动实时更新元素位置对应的透明度。

解决方案步骤 #

• 用useState维护透明度状态，实现样式动态更新
• 用useEffect在组件挂载后获取DOM元素，并监听滚动事件实时计算位置
• 每次计算前先判断card.current是否存在，避免null报错

修改后的代码 #

import { useRef, useState, useEffect } from 'react';

export const Card = ({ pic }) => {
    const card = useRef(null);
    const [opacity, setOpacity] = useState(0);

    useEffect(() => {
        // 定义计算透明度的函数
        const updateOpacity = () => {
            if (!card.current) return;
            const rect = card.current.getBoundingClientRect();
            // 当元素y轴位置大于500px时显示，否则隐藏
            setOpacity(rect.y > 500 ? 1 : 0);
        };

        // 组件挂载后立即计算一次初始状态
        updateOpacity();
        // 添加滚动监听，实时更新透明度
        window.addEventListener('scroll', updateOpacity);

        // 组件卸载时移除监听，避免内存泄漏
        return () => {
            window.removeEventListener('scroll', updateOpacity);
        };
    }, []);

    return (
        <li ref={card} style={{ opacity }}>
            <img src={pic} />
        </li>
    );
};

关键说明 #

• useEffect传空依赖数组，确保只在组件挂载时执行一次绑定逻辑
• updateOpacity函数里先校验card.current，防止未绑定DOM时的报错
• 监听scroll事件是因为页面滚动时，元素的getBoundingClientRect().y值会动态变化，需要实时更新透明度
• 组件卸载时移除滚动监听，避免不必要的内存占用

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