在 Framer motion 中使用 react 组件而不是 motion 的元素

Question

您好，我有这样一个组件：

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

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

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

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

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

Answer 1

从文档 (https://www.framer.com/docs/component/#custom-components) 中，您可以使用 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>
)

在 Framer motion 中使用 react 组件而不是 motion 的元素

use react component instead of motion's elements in Framer motion

reactjs

animation

next.js

framer-motion

page-transition