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

Question

我知道我可以motion像这样直接应用于 element/HTMLtag：

<motion.div>some content</div>

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

<Comp />

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

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

Answer 1

如果有人来到这个页面寻求如何motion从 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 示例。