仅此组件的查询选择器

Question

我正在为我的 div 添加高度，如下所示：

  const parentRef = useRef();

  useEffect(() => {
    let collapseHeight = parentRef.current.scrollHeight   
    const collapse = document.querySelector('.collapse-content-parent')
    collapse.style.height = collapseHeight + "px" 
  }, []);

当同一组件有多个实例时，这只会选择页面上的第一个 div。

我想做一些事情，例如将 querySelector 换成我的 ref，以便它特定于组件：

  const parentRef = useRef();

  useEffect(() => {
    let collapseHeight = parentRef.current.scrollHeight   
    parentRef.style.height = collapseHeight + "px" 
  }, []);

但是上面的结果是：

TypeError: Cannot set properties of undefined (setting 'height')

Answer 1

而不是使用 parentRef.style.height 使用这个 parentRef.current.style.height .

仅此组件的查询选择器

Query selector for this component only

reactjs

use-ref