Javascript 更改鼠标悬停时的反应中的背景视频

我有一个与几个链接头组件，我想背景视频的变化取决于我的链接悬停

在Header组件中，我有一个BackgroundVideo组件，它接收道具以动态更改源。然而，背景仍然没有改变

以下是我的标题组件代码：

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>
  );
}

导出默认函数头（）{
const[sourceVid，setSourceVid]=useState（null）；
返回(
setSourceVid（'clouds'）}>
setSourceVid（'marble'）}>
);
}

这是我的背景视频组件：

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>
  );
}

从“React”导入React；
从“/assets/clouds.mp4”导入云；
从“/assets/marble.mp4”导入大理石；
导入“./styles/BackgroundVideo.scss”；
导出默认函数BackgroundVideo（{sourceVid}）{
返回(
);
}

---

我认为现在发生的是，它被传递了一个字符串，而不是对导入视频的引用。但我不知道如何调和这一点。任何帮助都将不胜感激

问题是，正如您所指出的，您正在将字符串作为

源

属性传递，然后将其传递给

源

元素的

src

属性，而不是传递实际导入的视频（与字符串内容同名的变量）

（也可能是

BackgroundVideo

中的道具名称为

sourceVid

，但在

标题中使用时，道具称为
source
）

我认为解决这个问题的最简单方法是创建一个小函数，用于处理从字符串名称获取视频资源。例如：

函数getSourceVid（sourceVidName）{
开关（sourceVidName）{
案例“云”：
回归云；
“大理石”案：
返回大理石；
违约：
返回null；//或某些默认视频
}
}

然后在

背景视频
组件中使用它，如下所示：

导出默认函数BackgroundVideo（{sourceVidName}）{//注意这里重命名了prop
const sourceVid=getSourceVid（sourceVidName）；
返回(
);
}