将动画应用于React组件Framer-Motion。

Question

我知道可以直接将motion应用于元素/HTML标签，如下所示:

<motion.div>some content</div>

但是我该如何将它应用到这里呢？

<Comp />

没有将其包装在另一个HTML元素内，就像使用React-Transition-Group库一样。

Framer API提供Frame组件，但它的作用类似于永久附加的HTML元素，并且会破坏我的布局。

- Andrew

---

接受的答案应该是 @Gabi 的 https://dev59.com/Wrvoa4cB1Zd3GeqP_NNX#72006520。 - Jay Wick

Answer 1

如果有人来到这个页面寻找如何将Framer-Motion库中的motion应用于您的React组件，而不是直接应用于DOM元素如"div"或"span"，那么这里就是解决方案：

motion.custom()

使用示例：

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

const MotionLink = motion.custom(Link)

return <MotionLink />

今天的官方文档中没有提到这个问题，或者它可能被放在了一个深处不易找到的地方。

我在BUG报告中找到了相关信息，可以在这里找到这里，其中有一个Codesanbox的示例，由报告问题的人创建。

版本4.1.3或更高版本

编辑：如@Aleksandr K.所提到的，对于版本大于等于4.1.3，请使用以下内容：

const MotionLink = motion(Link)

- Andrew

---

非常奇怪！如此重要的功能竟然如此隐蔽。不过还是非常感谢这个。 - Behnam Esmaili

在 Framer Motion 版本 4.1.3 中，这个功能已不再可用。 - Essay97

对于版本号为4.1.3或更高版本，请使用motion（链接）。 - Aleksandr K.

自定义组件的官方文档。 - Ryan

Answer 2

motion.custom已于v4.0被弃用，建议使用motion(Component)或者motion("Component")。

你的代码将像这样简单：

const MotionComp = motion(Comp)

return <MotionComp>some content</MotionComp>

- Gabi

Answer 3

不使用任何内部函数，您只需要将其包装在任何运动元素中：

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

您可以在文档示例中发现这种行为，例如侧边菜单示例。

- Dennis Vash

---

你可以通过 props 传递组件，但这是一种不好的做法，通常你要使用 props.children 或高阶组件 (HOC)，你可以在 React 文档中了解更多相关内容。 - Dennis Vash