我正在使用 Electron 开发一个视频播放应用程序。我的要求之一是连续视频之间的无缝过渡。由于加载时间的原因，我无法用单个视频元素真正实现这一点。所以我使用了两个视频元素，一个放在另一个上面。
在常规 HTML 中，我可以很好地完成这项工作。我摆弄 z-index，两个视频来回切换。问题是 React 似乎不喜欢我摆弄 z-index。
我尝试了以下三段代码的几种变体:
this.frontPlayer.current.style = { ...this.frontPlayer.current.style, zIndex: "2" }
this.frontPlayer.current.style.zIndex = 2
this.frontPlayer.current.style.setProperty('zIndex', 2)
在每种情况下，当我使用 console.log 检查结果时，样式元素都会出现故障。我有包含更改的日志语句，我可以看到它从包含 z-index 更改的样式声明变为空白样式索引。
最佳答案
由于未能发布问题，第二天早上我意识到了问题所在。 CSSStyleDeclaration 对象不是 React 元素，它们是原生 CSS 元素。虽然它们具有 zIndex 属性，但它们应该通过 setProperty 进行更新，使用“z-index”的标准 css 标签。
this.frontPlayer.current.style.setProperty('z-index', 2)
关于javascript - 如何在不触发 React 重新渲染的情况下更改元素的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57892024/