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

Question

在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>;

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

Answer 1

你想在 React 组件中传递 style 属性，类似于你在 CSS-in-JS 中传递 className.

的情况

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