React多组件实例下用useRef替代querySelector设置div高度报错如何解决

错误原因 #

报错的核心是你混淆了useRef返回值的结构：useRef()返回的是一个包含current属性的普通对象，你绑定到DOM元素的引用只会存在于current字段下，你直接访问parentRef.style自然会因为parentRef.style是undefined，赋值时报错。
另外还需要补充边界判断，避免组件未挂载完成时current为null的情况，同时要确保你已经把parentRef正确绑定到对应div的ref属性上。

修正后代码 #

const parentRef = useRef();

useEffect(() => {
  // 先判断current是否存在，避免空值报错
  if (!parentRef.current) return;
  let collapseHeight = parentRef.current.scrollHeight   
  // 操作DOM要从current属性取节点
  parentRef.current.style.height = collapseHeight + "px" 
}, []); 

额外注意事项 #

• 一定要给你的目标div绑定ref，示例如下：

  <div ref={parentRef} className="collapse-content-parent">
    {/* 你的组件内容 */}
  </div>
  

• 如果你的组件内容是动态变化的，需要把内容的依赖项加到useEffect的依赖数组里，这样内容更新时高度会同步重新计算。

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