Framer Motion 的 motion.div 并非 React 组件名，而是对 motion 对象的属性访问（成员表达式），因此不受 JSX 中“组件首字母大写”规则约束；Babel 在编译时会将其保留为原样，最终调用 React.createElement(motion.div, ...)，而非当作 HTML 标签处理。
framer motion 的 `motion.div` 并非 react 组件名，而是对 `motion` 对象的属性访问（成员表达式），因此不受 jsx 中“组件首字母大写”规则约束；babel 在编译时会将其保留为原样，最终调用 `react.createelement(motion.div, ...)`，而非当作 html 标签处理。
在 React 开发中，我们熟知一条关键约定：自定义组件名必须以大写字母开头（如 <mycomponent></mycomponent>），而小写字母开头的 JSX 标签（如 <div></div>、<span></span>）会被 JSX 编译器（如 Babel）自动识别为原生 HTML 元素，并转换为 React.createElement('div', ...) 形式。
但 motion.div 看似违反了这一规则——它以小写 m 开头，却不是 HTML 标签，也不报错，还能正常工作。原因在于：它根本不是 JSX 标签名，而是一个 JavaScript 成员表达式（MemberExpression）。
当 JSX 编译器（如 Babel）解析 <motion.div></motion.div> 时，其 AST（抽象语法树）节点类型并非 JSXIdentifier（标识符），而是 JSXMemberExpression。编译器会明确识别出这是一个对象属性访问（motion 对象上的 div 属性），因此不会尝试将其当作 HTML 标签或组件名进行语义推断，而是直接保留为运行时表达式：
// 你写的 JSX
<motion.div animate="{{" opacity:></motion.div>
// Babel 编译后等效于（简化示意）
React.createElement(motion.div, { animate: { opacity: 1 } });
注意：此处传入 React.createElement 的第一个参数是 motion.div（一个函数），而非字符串 'motion.div' 或 'div'。这正是 motion.div 能作为可动画化 React 组件的根本机制——它本质是 Framer Motion 内部通过 forwardRef 和 memo 包装的高阶组件工厂函数。
✅ 正确用法示例：
import { motion } from 'framer-motion';
function App() {
return (
<motion.div initial="{{" scale: animate="{{" transition="{{" duration:>
Hello, Framer!
</motion.div>
);
}
⚠️ 注意事项：
-
motion.div不是“组件声明”，而是“组件引用”；你不能把它写成<motiondiv></motiondiv>（除非显式解构赋值const MotionDiv = motion.div，此时变量名需大写以符合组件命名规范）； - 同理，
motion.section、motion.ul、motion.custom（自定义 SVG 元素）均适用同一机制； - 若误写为
<motion></motion>（无属性访问），则因motion是对象而非函数组件，将导致运行时报错：Element type is invalid。
总结来说，JSX 的大小写规则仅作用于顶层标识符（如 <button></button> 或 <div></div>），而对成员表达式（<object.property></object.property>）完全不生效。Framer Motion 巧妙利用了这一语言特性与编译器行为，实现了既简洁又语义清晰的动画 API 设计。
