登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > React组件命名必须大写才能正确使用？

React组件命名必须大写才能正确使用？

2026-02-12 10:13:22 0浏览 收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《React组件首字母大写才能正确渲染？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

React 组件命名规范：首字母大写才能正确渲染

React 要求自定义组件名必须以大写字母开头，否则 JSX 会将其识别为原生 HTML 标签（如 `` 被当作 `` 未知标签处理），导致组件不渲染且无报错提示。修正命名并修复拼写错误后即可正常显示。

在 React 中，JSX 对组件名称的大小写极为敏感——这是初学者最容易忽略却影响最直接的规则之一。当你定义 function bannner() { ... } 并在 JSX 中写成 ，React 会将其解析为一个小写 DOM 标签（类似

或 ），而非你期望的自定义组件。由于浏览器不存在 这个原生标签，最终渲染结果为空白，控制台也通常不会抛出明显错误，造成“代码运行无反应”的困惑。

✅ 正确做法是：所有自定义组件名首字母必须大写（如 Banner, Cart），这是 React 的强制约定，也是 JSX 编译器识别组件的关键依据。

此外，原始代码中还存在两处关键问题需同步修复：

  • 拼写错误：pixhero 应为 prixhero（变量声明与使用需一致）；
  • JSX 语法细节：

    {title}

    等返回语句无需括号包裹（虽非错误，但推荐简洁写法）；
      内
    • 必须闭合，且嵌套结构需保持合法 HTML 语义。

    以下是修正后的完整可运行代码：

    function Banner() {
  const title = "c'est pur ?";
  return <h1>{title}</h1>;
}

function Cart() {
  const prixbedo = 10;
  const prixhero = 20;  // ✅ 修正变量名拼写（原代码中误写为 pixhero）
  const prixcoc = 70;
  return (
    <div>
      <h2>Panier</h2>
      <ul>
        <li>bedo : {prixbedo}$</li>
        <li>heroïne : {prixhero}$</li>
        <li>cocaïne : {prixcoc}$</li>
      </ul>
    </div>
  );
}

ReactDOM.render(
  <div>
    <Banner />
    <Cart />
  </div>,
  document.getElementById("root")
);

    ⚠️ 注意事项：

    • 确保 HTML 文件中已正确引入 React、ReactDOM 及 Babel（用于 JSX 转译），例如通过 CDN：
      <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>