Question

我通过映射到数组并将每个元素放在HTML标记中来动态呈现Symbol(react.element)列表。因此，我的问题是：如何获得每个渲染的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>
        )
      }
    }

Answer 3

const componentRef = useRef（空）和div ref = { componentRef }

Answer 4

Marcos答案的修改版本。

我放置了一个渲染布尔值，以确保在放置高度和宽度之前渲染所有数据。这是为了确保高度是在所有必要元素都到位的情况下计算出来的，而不会冒着接收不正确的高度和宽度的风险。

useResize挂钩放置在单独的文件夹中：

import { useState, useEffect, useCallback } from 'react';

export const useResize = (myRef: React.MutableRefObject<any>, rendering: boolean) => {
    const [width, setWidth] = useState(0);
    const [height, setHeight] = useState(0);

    const handleResize = useCallback(() => {
        setWidth(myRef.current.offsetWidth);
        setHeight(myRef.current.offsetHeight);
    }, [myRef]);

    useEffect(() => {
        if (!rendering) {
            myRef.current && myRef.current.addEventListener('resize', 
            handleResize(), { once: true });
        }
    }, [myRef, handleResize, rendering]);

    return { width, height };

用法示例：

const MyComponent = ({ A, B }) => {

  // A and B is data that is required in component

  const componentRef = useRef()
  const { width, height } = useResize(componentRef, !A || !B)

  if (!A || !B) return;

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

如何获得react.element的高度

4 个答案: