Javascript ReactJS组件名称必须以大写字母开头？

我正在运行ReactJS框架

我注意到，如果我的组件名称以小写字母开头，它就不起作用

例如，以下内容不会呈现：

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

var fml=React.createClass({
渲染：函数（）{
返回
}
});
React.render（，document.body）；

但只要我用

fml

替换

fml

它就会呈现

---

有什么原因我不能以小写字母开头标记吗？

在JSX中，小写标记名被认为是HTML标记。但是，带有点（属性访问器）的小写标记名不是

看

• 编译为

  React.createElement（'component'）

  （html标记）

• 编译为

  React.createElement（组件）

• 编译为

  React.createElement（对象组件）

---

@Alexandre Kirszenberg给出了一个非常好的答案，只是想补充另一个细节

React用于包含一个众所周知的元素名白名单，如

div

等，它用来区分DOM元素和React组件

---

但由于维护该列表并不是那么有趣，而且web组件使创建自定义元素成为可能，因此他们规定所有React组件必须以大写字母开头，或者在JSX中包含一个点，React类被大写以使XML兼容，这样它就不会被误认为是HTML标记。如果react类没有大写，则它是一个HTML标记，作为预定义的JSX语法。

JSX标记的第一部分确定react元素的类型，基本上有一些惯例大写、小写、点表示法

大写和点符号类型表示

JSX

标记指的是React组件， 因此，如果使用JSX

编译到

React.createElement（Foo）

或

编译到
React.createElement（Foo.bar）
，并对应于JavaScript文件中定义或导入的组件

而小写类型表示内置组件，如
或
，并导致字符串
'div'
或
'span'
传递给
React.createElement（'div'）

建议使用大写字母命名组件。如果您有一个以小写字母开头的组件，
在
JSX
中使用前，将其分配给大写的变量，从：

当一个元素类型以小写字母开头时，它引用一个内置组件，如or，并导致传递给React.createElement的字符串'div'或'span'。以大写字母开头的类型，如compile to React.createElement（Foo），并与JavaScript文件中定义或导入的组件相对应

还请注意：

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在JSX中使用它之前将其分配给大写变量

这意味着必须使用：

constfoo=Foofoo
用作JSX中的组件元素之前，请执行code>

用户定义的组件必须大写

当一个元素类型以小写字母开头时，它引用一个内置组件，如
或
，并产生一个字符串“
div
”或
'span'
，传递给
React.createElement
。以大写字母开头的类型，如
编译为
React.createElement（Foo）
，并与JavaScript文件中定义或导入的组件相对应

建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在
JSX
中使用它之前将其分配给大写变量

例如，此代码将不会按预期运行：

从“React”导入React；
//错了！这是一个组成部分，应资本化：
功能你好（道具）{
//正确！此使用是合法的，因为div是有效的HTML标记：
返回Hello{props.toWhat}；
}
函数HelloWorld（）{
//错误！React认为是HTML标记，因为它没有大写：
返回；
}

为了解决这个问题，我们将把hello重命名为hello，并在需要时使用

关于它：

从“React”导入React；
//对！这是一个组成部分，应大写：
功能你好（道具）{
//正确！此使用是合法的，因为div是有效的HTML标记：
返回Hello{props.toWhat}；
}
函数HelloWorld（）{
//正确！React知道是一个组件，因为它是大写的。
返回；
}

这是非常好的信息，如果有官方的文档参考就更好了。谢谢。这是什么时候改变的？再加半个小时到柜台。我简直疯了，试图渲染类似于
let component=components[compType]，并得到无意义的错误。我尝试了
，但也不起作用。我不敢相信我以前没有注意到有这样的规则。这是个坏主意。我在这里很有礼貌。是的，这可能会让n00bs非常不快，因为如果调用
组件
而不是
组件
，他们可爱的网站将加载，没有错误，但没有内容！有关更多详细信息，请查看此问题的答案：
import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

import React from 'react';

// Correct! This is a component and should be capitalized:
function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Correct! React knows <Hello /> is a component because it's capitalized.
  return <Hello toWhat="World" />;
}