将 Video 元素作为道具发送到子组件 React

时间:2021-05-07 14:35:32

标签: reactjs video parent-child send react-props

是否可以将视频元素作为道具发送到 React 中的子组件?

上下文: 我想制作分析视频并在画布元素上绘制结果的子组件。为了这个组件需要视频内容和他的属性。这可能吗?如何实现?

1 个答案:

答案 0 :(得分:1)

可以考虑使用 useRef 钩子获取 DOM 视频节点访问权限。

function Parent() {
  const videoRef = useRef();

  return (
    <div>
      <video ref={videoRef} />
      <Child videoRef={videoRef} />
    </div>
  )
}



function Child({ videoRef }) {
  const [duration, setDuration] = useState(0)
  useEffect(() => {
    const videoElement = videoRef.current;

    setDuration(videoElement.duration);
  }, []);

  return <div>Video duration is {duration}</div>
}