使用 react-spring，AnimatedFoo = animated(Foo) 不起作用——或者如何为组件设置动画？答案

【问题标题】：Using react-spring, AnimatedFoo = animated(Foo) doesn't work -- or how to animate a Component?使用 react-spring，AnimatedFoo = animated(Foo) 不起作用——或者如何为组件设置动画？
【发布时间】：2021-04-21 20:03:37
【问题描述】：

在react-spring Basics page:

const AnimatedDonut = animated(Donut)

因为我认为<animated.div> 可以工作，但<animated.Donut> 不工作。

所以我尝试了：

https://codesandbox.io/s/weathered-breeze-ghdse


const AnimatedFoo = animated(Foo);
// ....

return <AnimatedFoo style={props}>I will fade in</AnimatedFoo>;

但它没有动画。它应该是它的工作方式吗？

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

您应该在 React 组件中传递 style 属性，类似于在 CSS-in-JS 中传递 className 时发生的情况。

// Add style prop
function Foo({ children, style }) {
  return <div style={style}>Hello World {children}</div>;
}

【讨论】：

谢谢，它有效。我注意到这两个地方都必须叫它style。我们不能称它为bar 并传递给Foo 并在那里使用style={bar}。 bar 也必须是 style