我正在JSBin 上玩 ReactJS 框架。
我注意到，如果我的组件名称以小写字母开头，它将不起作用。
例如以下内容不会呈现：
var fml = React.createClass({
render: function () {
return <a href='google.com'>Go</a>
}
});
React.render(<fml />, document.body);
但只要我用Fml 替换fml，它就会渲染。
我不能以小写字母开头标签有什么原因吗？
【问题讨论】：
标签： javascript reactjs
在 JSX 中，小写的标签名称被认为是 HTML 标签。但是，带有点（属性访问器）的小写标记名称不是。
见HTML tags vs React Components。
<component /> 编译为 React.createElement('component')（html 标记）<Component /> 编译为 React.createElement(Component)
<obj.component /> 编译为 React.createElement(obj.component)
【讨论】：
let component = components[compType]; <component/> 之类的东西，并得到无意义的错误。
<components[name] /> 也不起作用。
Components 而不是 components，他们可爱的网站将加载没有错误但没有内容！
@Alexandre Kirszenberg 给出了一个很好的答案，只是想添加另一个细节。
React 曾经包含一个众所周知的元素名称的白名单，例如 div 等，用于区分 DOM 元素和 React 组件。
但是因为维护这个列表并不是那么有趣，而且因为 web 组件可以创建自定义元素，所以他们制定了 所有 React 组件必须以大写字母开头的规则，或者包含点。
【讨论】：
当元素类型以小写字母开头时，它指代内置组件，如 or 并导致传递给 React.createElement 的字符串 'div' 或 'span'。以大写字母开头的类型，例如编译为 React.createElement(Foo) 并对应于您的 JavaScript 文件中定义或导入的组件。
还要注意：
我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在 JSX 中使用之前将其分配给大写变量。
这意味着必须使用：
const Foo = foo; 在使用 foo 作为 JSX 中的组件元素之前。
【讨论】：
JSX标签的第一部分决定了React元素的类型，基本上有一些约定大写、小写、点符号。
大写和点符号类型表示JSX标签是指一个React组件，
因此，如果您使用 JSX <Foo /> 编译为 React.createElement(Foo)
或 <foo.bar /> 编译为 React.createElement(foo.bar) 并对应于您的 JavaScript 文件中定义或导入的组件。
而小写类型表示像<div>或<span>这样的内置组件，并导致将字符串'div'或'span'传递给React.createElement('div')。
React 建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，
在JSX 中使用之前将其分配给大写变量。
【讨论】：
在 JSX 中，React Classes 被大写以使 XML 兼容，因此它不会被误认为是 HTML 标记。如果 react 类没有大写，它是一个 HTML 标记作为预定义的 JSX 语法。
【讨论】：
用户定义的组件必须大写
当元素类型以小写字母开头时，它指代一个内置组件，如<div> 或<span>，并导致将字符串“div”或'span' 传递给React.createElement。以<Foo /> 之类的大写字母开头的类型编译为React.createElement(Foo)，并对应于您的JavaScript 文件中定义或导入的组件。
React 建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请先将其分配给大写变量，然后再在JSX 中使用它。
例如，这段代码不会按预期运行：
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" />;
}
为了解决这个问题，我们将 hello 重命名为 Hello 并使用
<Hello />参考它：
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" />;
}
这里是reference
【讨论】：