为何Framer Motion中的motion.div组件以小写开头？

首先明确React JSX的核心规则：

• 小写开头的标签（比如<div>）会被编译为原生HTML元素；
• 大写开头的标识符（比如<MyComponent>）会被当作自定义React组件，去查找对应的变量。

那motion.div为什么能打破这个“小写开头必须是HTML元素”的直觉？关键在于它不是直接的标签名，而是一个JS表达式的结果。

具体拆解： #

1. motion是Framer Motion导出的一个工具对象，它的div、span、section等属性，本质都是已经封装好的合法React组件（这些组件本身是符合大写开头规则的类/函数组件，只是通过对象属性的方式对外暴露）。
2. 当你在JSX中写<motion.div>时，编译器会先解析为访问motion.div这个变量——也就是先求值拿到对应的组件，再按照React的规则渲染。这时候判断的是最终拿到的组件是否符合自定义组件要求，而不是属性名div的大小写。

你可以自己模拟这个逻辑验证：

// 自定义一个类似motion的对象
const CustomElements = {
  div: function DivComponent(props) {
    return <div className="custom" {...props} />;
  }
};

// 在JSX中直接使用<CustomElements.div>，和motion.div完全同理
function App() {
  return <CustomElements.div>我是自定义的div组件</CustomElements.div>;
}

总结 #

React的大小写规则作用于直接作为标签名的独立标识符，而通过对象属性访问得到的组件，规则判断的是最终求值后的组件本身。motion.div里的div是对象的属性名，不是直接的标签名，所以不受小写开头的限制。

内容的提问来源于stack exchange，提问作者ashish singh