应用动作来反应组件 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.custom自v4.0起已弃用，取而代之的是motion(Component)或motion("Component")。

你的代码看起来就像这样

const MotionComp = motion(Comp)

return <MotionComp>some content</MotionComp>

Answer 3

不使用任何内部函数，你只需要用任何运动元素包裹它：

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

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