应用运动来反应组件帧-运动

Question

我知道可以将motion直接应用于元素/HTMLtag标记，如下所示：

<motion.div>some content</div>

但我怎么才能把它应用到这个问题上呢？

<Comp />

而不将其包装在另一个HTML元素中，比如在React-Transition-Group库中。

Framer提供了Frame组件，但是它的作用就像永久的附加HTML元素一样，带有自己的样式，而且它扰乱了我的布局。

Answer 1

如果有人来本页面寻找如何将Framer库中的motion应用于您的React组件和而不是直接DOM元素(如"div“或"span”)的解决方案，则如下所示：

motion.custom()

使用实例：

import { Link } from "react-router-dom"

const MotionLink = motion.custom(Link)

return <MotionLink />

至于今天，它没有在正式文件中提到，或者在某个很深很难找到的地方。

我在bug reports 这里中找到了它，有一个码箱说明了我的示例，它是由报告BUG的人创建的。

Answer 2

motion.custom和v4.0一样被反对，赞成motion(Component)或motion("Component")。

您的代码只需如下所示

const MotionComp = motion(Comp)

return <MotionComp>some content</MotionComp>

Answer 3

不使用任何内部功能，您只需使用将其与任何运动元素包装。

<motion.div>
  <Comp />
</motion.div>

您可以在文档中的示例中注意到这种行为，比如侧菜单示例。。