如何在渲染布局之前获取安装时的视频高度？答案

【问题标题】：How to get video height on mounting before rendering layout?如何在渲染布局之前获取安装时的视频高度？
【发布时间】：2023-02-11 01:53:31
【问题描述】：

我在一个页面上呈现两个选项卡。选项卡内容是一个视频播放器和它下面的其他元素。问题是切换选项卡时布局出现故障。任何人都可以帮助我吗？

为了解决这个问题，我尝试没有成功（安装高度为 0）：

  const [videoHeight, setVideoHeight] = useState<number | null>(0);

  useEffect(() => {
    const { height } = videoElement.current?.getBoundingClientRect() as DOMRect;
    setVideoHeight(height);
  }, []);

      <CardMedia
        component={'video'}
        src={videourl}
        ref={videoElement}
        height={videoHeight}
        width={'100%'}
      />

这是一个代码框：https://codesandbox.io/s/video-player-mw4c98?file=/src/App.tsx

更新程序

我试过 useLayoutEffect 而不是 useEffect 也没有成功。我相信那是因为当时视频没有完全加载。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用 React.useLayoutEffect 在浏览器绘制之前执行您的任务。 Docs

【讨论】：

我也试过了没有成功
如果您还使用 undefined 而不是 0 来初始化您的状态会怎么样？