如何获取 react.element 的高度

Question

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

在此先感谢您的帮助

Answer 1

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

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={myRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
    <div/>
  )
}

Answer 2

 class MyComponent extends Component {
      constructor(props){
        super(props)
        this.myDiv = React.createRef()
      }

      componentDidMount () {
        console.log(this.myDiv.current.offsetHeight)
      }

      render () {
        return (
          <div ref={this.myDiv}>element</div>
        )
      }
    }