无法在 'CSSStyleDeclaration' 上设置索引属性

Question

我有一个使用 React 的 Gatsby 项目 Spring。我收到以下错误：

TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.

在我的一些研究中，我发现浏览器更新在其他情况下会导致此类错误，但我还没有发现任何与 React 相关的问题 Spring。

我已尝试将所有相关依赖项升级到最新版本。

我已将其缩小到使用 React 的部分代码 Spring:


const trail = useTrail(2, {
    opacity: sideNav ? 1 : 0,
    x: sideNav ? 0 : 180,
    height: sideNav ? 180 : 0,
    from: { opacity: 0, x: 20, height: 0 },
  });


<NavItem style={trail}>
    <Link to="/">Home</Link>
</NavItem>

如果我去掉 style={trail} 我就不会再收到错误所以我认为它与 React Spring 的 useTrail 有关。

我希望它能像几天前那样工作，在那里我没有收到错误并且我的动画按预期工作。事实上，我已经有几周没有碰过代码了，几天前网站还在正确加载。现在突然坏了。

Answer 1

useTrail documentation 说：

The return value is an array containing animated props.

因此您不能直接将 trail 应用于一项的 style。它应该是这样的：

{trail.map(style => (
  <NavItem
    style={style}
  >
    <Link to="/">Home</Link>
  </NavItem>
))}

无法在 'CSSStyleDeclaration' 上设置索引属性

Failed to set an indexed property on 'CSSStyleDeclaration'

animation

spring

reactjs

gatsby

无法在 'CSSStyleDeclaration' 上设置索引 属性

Failed to set an indexed property on 'CSSStyleDeclaration'

animation

spring

reactjs

gatsby

无法在 'CSSStyleDeclaration' 上设置索引属性