Question

我正在使用Electron开发视频播放应用。我的要求之一是在背对背视频之间无缝过渡。由于加载时间，我真的无法通过单个视频元素来实现。因此，我处理了两个视频元素，一个放在另一个之上。

在常规HTML中，我可以使其工作得相当好。我摆弄Z索引，然后两个视频来回捕捉。问题在于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索引更改的样式声明到空白样式索引。

Answer 1

由于未能发布问题，第二天早上我意识到了问题所在。 CSSStyleDeclaration对象不是React元素，而是原生CSS元素。它们具有zIndex属性，但应使用标准的css标签“ z-index”通过setProperty进行更新。

this.frontPlayer.current.style.setProperty('z-index', 2)

如何在不触发React的重新渲染的情况下更改元素的样式？

1 个答案: