如何解决在鼠标悬停时在React中更改背景视频
我有一个带有几个链接的Header组件,我希望背景视频根据我悬停在哪个链接上而改变。
在Header组件中,我有一个BackgroundVideo组件,该组件接收用于动态更改源的道具。但是,背景仍然没有改变。
这是我的Header组件代码:
export default function Header() {
const [sourceVid,setSourceVid] = useState(null);
return (
<div>
<BackgroundVideo source={sourceVid} />
<div className="header">
<h1 onMouseEnter={()=>setSourceVid('clouds')}>
<a href="#">CLOUDS</a>
</h1>
<h1 onMouseEnter={()=>setSourceVid('marble')}>
<a href="#">MARBLE</a>
</h1>
</div>
</div>
);
}
这是我的BackgroundVideo组件:
import React from 'react';
import clouds from './assets/clouds.mp4';
import marble from './assets/marble.mp4';
import './styles/BackgroundVideo.scss';
export default function BackgroundVideo({ sourceVid }) {
return (
<div>
<video className="clouds" autoPlay muted loop>
<source type="video/mp4" src={sourceVid} />
</video>
</div>
);
}
我认为所发生的是正在传递一个字符串,而不是引用导入的视频。但是我不确定如何调和。任何帮助将不胜感激!
解决方法
正如您所指出的那样,问题在于,您正在传递一个字符串作为source
属性,然后将其传递给src
元素的source
属性,而不是传递实际导入的视频(变量名称与字符串的内容相同)。
(也可能是BackgroundVideo
中道具的名称为sourceVid
,但在Header
中使用时,道具称为source
)。
我认为解决此问题的最简单方法是创建一个小的函数来处理从字符串名称获取视频资产的问题。例如:
function getSourceVid(sourceVidName) {
switch (sourceVidName) {
case "clouds":
return clouds;
case "marble":
return marble;
default:
return null; // or some default video
}
}
然后仅在BackgroundVideo
组件中使用它,就像这样:
export default function BackgroundVideo({ sourceVidName }) { // note renamed prop here
const sourceVid = getSourceVid(sourceVidName);
return (
<div>
<video className="clouds" autoPlay muted loop>
<source type="video/mp4" src={sourceVid} />
</video>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。