React中useRef获取元素后样式不生效怎么办？

令狐雨涵提问于 2026-02-01 17:17:42 阅读 47

框架

我在用React做卡片折叠效果时遇到问题，通过useRef获取到元素后直接修改style.height属性，样式完全没反应。之前写过类似的原生JS没问题，这次在函数组件里试过useState和useEffect都试过…

我的CSS是这样写的：

.card-content {
  overflow: hidden;
  height: 100px;
  transition: height 0.3s ease;
}

JSX里这样绑定：

const contentRef = useRef()

点击事件里直接操作：

contentRef.current.style.height = 'auto'

控制台没报错，但高度就是不变化。尝试过把’auto’换成’200px’也不行，用开发者工具检查元素发现属性确实被改了，但界面没变化，这是什么情况啊？

组件设计

我来解答赞 10 收藏

反馈

2 条解答

Good“瑞雪 Lv1

你这个情况我之前也踩过坑。直接修改 ref 的 style 属性确实能改 DOM 的属性，但你会发现浏览器根本不会触发重排，所以样式不会立刻生效。React 的虚拟 DOM 机制会拦截很多直接操作。

解决办法是强制让浏览器重新渲染。你可以在设置 style 后触发一次 reflow，比如：

contentRef.current.style.height = 'auto'
void contentRef.current.offsetWidth

这样就能看到变化了。不过更好的方式是通过 className 控制，比如用一个折叠的 class：

.collapsible {
height: 100px;
overflow: hidden;
transition: height 0.3s ease;
}

.collapsible.open {
height: auto;
}

然后在 JS 里切换 class：

contentRef.current.classList.add('open')

或者用 state 控制：

const [isOpen, setIsOpen] = useState(false)
...
contentRef.current.classList.toggle('open', isOpen)

这样更符合 React 的设计思想。直接操作 DOM 毕竟不是 React 推荐的做法，除非你是写第三方库，不然尽量还是用状态驱动视图。

2026-02-05 04:03

♫俊涵 Lv1

这个问题挺常见的，React里直接操作DOM样式有时候会有点坑。你现在的写法确实会让高度属性被修改，但React的渲染机制会导致CSS过渡效果失效。

最简单的方式是不要直接改 style.height，用类名切换更靠谱。比如这样：

const contentRef = useRef();

const [isExpanded, setIsExpanded] = useState(false);



// 点击事件

const toggleExpand = () => {

  setIsExpanded(!isExpanded);

};



useEffect(() => {

  if (contentRef.current) {

    contentRef.current.style.height = isExpanded ? 'auto' : '100px';

  }

}, [isExpanded]);



return (

  <div className={card-content ${isExpanded ? 'expanded' : ''}} ref={contentRef} onClick={toggleExpand}>

    {/* 内容 */}

  </div>

);

然后CSS加个类：
.expanded { height: auto !important; }

这种方式让React负责状态管理，样式切换更稳定。如果你非得坚持直接改高度，记得把 overflow 和 transition 配置检查一下，确保没有冲突。

实在不行，试试强制触发重绘：contentRef.current.offsetHeight 调用一下，有时候能解决渲染问题。不过还是推荐用状态管理更优雅。

2026-02-01 17:18