如何解决将 Video 元素作为道具发送到子组件 React
是否可以将视频元素作为道具发送到 React 中的子组件?
上下文: 我想制作分析视频并在画布元素上绘制结果的子组件。为了这个组件需要视频内容和他的属性。这可能吗?如何实现?
解决方法
可以考虑使用 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>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。