动态声明FramerMotionHTML元素类型。

在 Framer Motion 中，声明了 HTML 元素类型是很常见的事情。通常情况下，我们会直接在组件内部写上 HTML 标签名。但是在某些情况下，我们需要根据外部传来的数据来动态地声明元素类型。

为了实现这个功能，我们可以使用动态键名的方式来声明元素类型。具体操作是利用 JSX 的编程方式，将键名设为需要声明的元素类型，值为 props。示例代码如下：

import { HTMLMotionProps, motion } from "framer-motion";

// 定义组件 Props 类型
type Props = HTMLMotionProps<"div"> & {
  as: keyof JSX.IntrinsicElements;
};

// 定义组件
export const CustomMotionComponent = ({ as: tag, ...rest }: Props) => {
  const MotionComponent = motion[tag];

  return <MotionComponent {...rest} />;
};

在上面的代码中，我们定义了一个名为 CustomMotionComponent 的组件，该组件可以接受一个 as 属性，该属性是 JSX 元素类型的一个键名。在组件的内部，我们使用动态键名声明了 MotionComponent，并将其余的 props 通过展开符传递给了 MotionComponent。

这样，我们就可以轻松地动态声明 Framer Motion HTML 元素类型了。