React中能否用大写形式定义div元素？是否兼容标准写法？

在原生HTML环境中，标签名是大小写不敏感的，<DIV>和<div>的效果完全一致，浏览器都会正常解析为div元素，不会有任何问题。

但在React等使用JSX的框架环境里，规则有所不同：

• 小写开头的标签会被识别为原生HTML元素
• 大写开头的标签会被当作自定义React组件

你当前用<DIV>没报错，大概率是项目的编译工具（比如Babel）做了兼容处理，但这种写法并不符合JSX的编码规范，不建议这么做，原因包括：

• 团队协作时，其他人看到<DIV>会第一时间认为是自定义组件，增加理解成本
• 一旦项目编译规则调整，很可能突然出现'DIV' is not defined的报错
• 混合使用<DIV>和<div>会让代码风格混乱，降低可读性

所以即使当前能正常运行，也建议统一使用标准的小写<div>写法，避免后续潜在问题。

你的代码示例：

<DIV className="pricing">
    {pricingPlans.map(plan =>(
        <p key={feature}>
            <i className="ri-checkbox-circle-line"></i>
            {feature}
        </p>
    ))}
</DIV>

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