javascript - 如何让 ReactJS 视频 src 有条件地改变

Question

我正在尝试根据我的当前状态值在我的功能组件内有条件地更改背景视频 src，但它不会更改视频。如果我的{weather.weather}状态是“云”，我想要src="./sand.mp4"其他视频，我想要src="./beach.mp4".

视频在初始渲染的条件下正确加载，但不会根据状态值更新。单击按钮时状态会正确更改，并将 console.log 正确更改为该值。我没有管理带有状态的视频 src，而只是使用文件的路径。我尝试使用状态管理视频 src，但我遇到了同样的问题，即视频不会改变。我在想它可能需要重新渲染，但我不确定如何去做。

**所有其他代码和状态更改都通过输入和提交按钮处理

<video autoPlay muted loop id="background-video">
  <source src={weather.weather === "clouds" ? "./sand.mp4" : "./beach.mp4" } type="video/mp4" />
</video>

标签： javascriptreactjs

Answer 1

代码沙箱的工作示例

要详细了解这一点，请访问此问题。这个是重复的。