0

嗨，我有一个这样的组件：

const Comp = (props) => {
    return(
       <div>
           data here
       </div>
    )
}

我想像这样使用成帧器运动：

const Container = () => {
    return(
       <motion.Comp variants={variants} someProp="someProp"/>
    )
}

我想这样做的原因是我不认为将很多 div 作为包装器是一个好主意。我可以在“Comp”组件中使用motion.div，但我的一些应用程序组件是不需要在我的整个应用程序中为它们设置动画的。我只想要一个将动画添加到组件中的第一个元素的解决方案。

我也搜索并找到了一个解决方案“motion(Comp)”，但它不起作用。

4

1 回答 1

1

从文档 ( https://www.framer.com/docs/component/#custom-components ) 中，您可以包装任何组件以motion()将其用作 framer-motion 组件。您提到您找到了该解决方案，但它不起作用，并且没有更多关于它的详细信息，我无法给您具体原因。但很可能你忘记传递ref到你的组件，像这样：

const Foo = React.forwardRef((props, ref) => <div ref={ref} />)

这ref是 framer-motion 将识别页面上哪个元素是它应该设置动画的元素的方式，因此需要将其传递给正确的元素。完成后，您可以将其包装为motion：

const MotionFoo = motion(Foo)

请记住，无论您的自定义组件有多少元素，只有ref传递给它的元素才会被动画化。例如：

const BusyFoo = React.forwardRef((props, ref) => (
  <div>
    <div ref={ref}>I will be animated!</div>
    <div>I won't be animated. :(</div>
  </div>
)
于 2021-09-30T19:11:41.340 回答