应用运动来反应组件 Framer-Motion

Question

我知道我可以像这样直接将motion应用到元素/HTML标签：

<motion.div>some content</div>

但是我怎么能把它应用到这个上呢？

<Comp />

无需将其包装在另一个 HTML 元素中，就像在React-Transition-Group库中一样。

Framer API 提供了Frame组件，但它的作用就像具有自己样式的永久附加 HTML 元素，它弄乱了我的布局。

Answer 1

如果有人来到这个页面寻求如何将 Framer- motion库中的动作应用到你的 React 组件而不是像“div”或“span”这样的直接 DOM 元素的解决方案，这里是：

motion.custom()

使用示例：

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

const MotionLink = motion.custom(Link)

return <MotionLink />

至于今天官方文档中没有提到，或者在某个地方很深，很难找到。

我在这里的 BUG 报告中找到了它，有一个Codesanbox说明了我的示例，由报告错误的人创建。

Answer 2

不使用任何内部功能，您只需要用任何运动元素包装它：

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

您可以在文档中的示例中注意到这种行为，例如Side Menu 示例。

Answer 3

motion.custom从v4.0开始被弃用，取而代之的是motion(Component)或motion("Component") 。

您的代码看起来像这样

const MotionComp = motion(Comp)

return <MotionComp>some content</MotionComp>