React组件渲染疑问：小写命名函数组件无法显示的原因

Hey there! Let me clear up this confusion for you as someone new to React—this is a super common gotcha that trips up a lot of beginners!

核心原因：React的组件命名约定 #

React有一个严格的内置规则，用来区分你的自定义组件和原生HTML元素：

• 自定义组件必须以大写字母开头（比如Abc、UserProfile）。
• 小写名称（比如abc、div）是原生HTML标签的专属（例如<div>、<p>这类）。

当你在App的render方法里使用<abc />时，React并没有把它识别为你的自定义函数组件，反而将其当成了一个原生HTML标签——但标准HTML里根本不存在<abc>标签，所以最终只会渲染出一个空的<abc>元素，没有任何内容。

不是“必须用ReactDOM.render显式渲染” #

这里要澄清一点：小写命名的组件并不需要专门通过ReactDOM.render来渲染。真正的问题在于，React永远不会把小写开头的组件当成你的自定义代码——无论你在哪里使用它，都会默认它是原生HTML元素。

示例对比 #

错误写法（渲染空标签）

// 小写开头的组件
function abc() {
  return <div>Hello from my component!</div>;
}

function App() {
  return (
    <div className="App">
      <abc /> {/* React认为这是原生<abc>标签 → 输出空元素 */}
    </div>
  );
}

正确写法（正常渲染）

// 大写开头的组件
function Abc() {
  return <div>Hello from my component!</div>;
}

function App() {
  return (
    <div className="App">
      <Abc /> {/* React识别为自定义组件 → 正常渲染内容 */}
    </div>
  );
}

特殊情况：如果必须用小写开头？ #

如果出于某些原因你不得不使用小写开头的组件（比如来自第三方库的组件），可以通过把它赋值给一个大写开头的变量来解决：

function abc() {
  return <div>Hello!</div>;
}

// 赋值给大写变量
const Abc = abc;

function App() {
  return <Abc />; // 现在React能正确渲染你的组件了
}

总结 #

这只是React保持代码歧义性的一种方式——只要记住所有自定义组件都以大写字母开头，就再也不会遇到这个问题啦。祝你编码愉快！

内容的提问来源于stack exchange，提问作者Rajeev Akotkar