时间戳

首页 > 解决方案 > 如何获得react.element的高度

javascript - 如何获得react.element的高度

问题描述

我Symbol(react.element)通过映射到数组并放置其每个元素的 HTML 标记来动态呈现列表。因此，我的问题是：如何获得每个渲染的高度Symbol(react.element)？这似乎不在Symbol(react.element)' 对象中。

在此先感谢您的帮助

标签： javascriptnode.jsreactjs

解决方案

实际上，如果您使用的是功能组件，最好将此调整大小逻辑隔离在自定义挂钩中，而不是将其留在组件内。您可以像这样创建自定义挂钩：

const useResize = (myRef) => {
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const handleResize = () => {
    setWidth(myRef.current.offsetWidth)
    setHeight(myRef.current.offsetHeight)
  }

  useEffect(() => {
    myRef.current && myRef.current.addEventListener('resize', handleResize)

    return () => {
      myRef.current.removeEventListener('resize', handleResize)
    }
  }, [myRef])

  return { width, height }
}

然后你可以像这样使用它：

const MyComponent = () => {
  const componentRef = useRef()
  const { width, height } = useResize(componentRef)

  return (
    <div ref={componentRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
    <div/>
  )
}

推荐阅读