将 Video 元素作为道具发送到子组件 React
Send a Video element as props to child component React
是否可以将 Video 元素作为 prop Video 元素发送到 React 中的子组件?
上下文:
我想制作分析视频并在 canvas 元素上绘制结果的子组件。为了这个组件需要视频内容和他的属性。这可能吗?如何实现?
可以考虑useRef
hook 获取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>
}
是否可以将 Video 元素作为 prop Video 元素发送到 React 中的子组件?
上下文: 我想制作分析视频并在 canvas 元素上绘制结果的子组件。为了这个组件需要视频内容和他的属性。这可能吗?如何实现?
可以考虑useRef
hook 获取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>
}