如何让 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>

Answer 1

codesandbox 的工作示例

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