ReactJS中小写变量名作为类名无效？新手技术咨询

嘿，这可不是你遗漏了什么配置——React对组件命名的大写要求是硬性规则，和你用的Sublime Text编辑器完全没关系哦！

背后的原因：JSX的解析逻辑 #

JSX本质是JavaScript的语法糖，编译时会被转换成React.createElement()调用。这里的核心规则是：

• 如果JSX标签名是小写开头，React会把它当作原生HTML标签（比如<div>、<p>）处理，去查找浏览器是否支持这个原生标签。显然你定义的quiz不是原生HTML标签，自然无法正常渲染。
• 如果标签名是大写开头，React才会识别这是你自定义的React组件，去匹配你定义的类/函数组件。

举个简单的对比例子：

// 小写开头：被当成原生HTML标签，无法渲染你的组件
class quiz extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}
// 使用时 <quiz /> → 无效

// 大写开头：正确识别为自定义组件
class Quiz extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}
// 使用时 <Quiz /> → 正常渲染

补充小提示 #

不管是类组件还是函数组件，这个命名规则都适用。另外如果组件用默认导出，导入时也要保持大写开头，比如：

// 导出组件
export default class Quiz extends React.Component { ... }
// 导入时保持大写
import Quiz from './Quiz';

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