为啥 react 中的组件需要大写？ [复制]

Posted 2023-02-21

【中文标题】为啥 react 中的组件需要大写？ [复制]

【英文标题】：Why do components in react need to be capitalized? [duplicate]为什么 react 中的组件需要大写？ [复制]

【发布时间】：2016-01-20 10:31:19

【问题描述】：

因此，当您声明一个组件以使用小写首字母进行响应时，它不会显示，也不会引发错误。当您将组件名称大写时，它确实有效。

这样实现的目的是什么？为了避免与现有的 html 元素发生冲突，或者这是一个错误？

var test = React.createClass(
  render: function() 
    return (
      <div>Test</div>
    );
  
);

var Screen = React.createClass(
  render: function() 
    return (
      <div>
        <test/>
      </div>
    );
  
);

当我将test 更改为Test 时，它可以工作：

var Test = React.createClass(
  render: function() 
    return (
      <div>Test</div>
    );
  
);

var Screen = React.createClass(
  render: function() 
    return (
      <div>
        <Test/>
      </div>
    );
  
);

【参考方案1】：

React 实际上只是区分大小写。

这里有一个相关的 github 问题，有人问同样的问题。 https://github.com/reactjs/React.NET/issues/76

【讨论】：

DOM 不区分大小写（在 HTML 模式下）。

那个 github 问题是在讨论 DOM 节点的属性，而不是元素名称。

【参考方案2】：

来自some react release notes

JSX 标记名称约定（小写名称指的是内置组件，大写名称指的是自定义组件）。

【讨论】：

我认为有可能打破约定。如果违反约定会破坏代码，那不仅仅是约定。

可能是因为它遵循 Java 等其他 OOP 类命名约定