Javascript ReactJS 组件名称必须以大写字母开头吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30373343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS component names must begin with capital letters?
提问by shaunakde
I am playing around with the ReactJS framework on JSBin.
我正在JSBin上使用 ReactJS 框架。
I have noticed that if my component name starts with a lowercase letter it does not work.
我注意到如果我的组件名称以小写字母开头，则它不起作用。
For instance the following does not render:
例如，以下不呈现：
var fml = React.createClass({
render: function () {
return <a href='google.com'>Go</a>
}
});
React.render(<fml />, document.body);
But as soon as I replace the fmlwith Fmlit does render.
但是一旦我fml用Fml它替换它就会渲染。
Is there a reason I cannot begin tags with small letters?
有什么原因我不能用小写字母开始标签吗？
回答by Alexandre Kirszenberg
In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.
在 JSX 中，小写的标签名称被认为是 HTML 标签。但是，带有点（属性访问器）的小写标记名称不是。
See HTML tags vs React Components.
<component />compiles toReact.createElement('component')(html tag)<Component />compiles toReact.createElement(Component)<obj.component />compiles toReact.createElement(obj.component)
<component />编译为React.createElement('component')（html标签）<Component />编译为React.createElement(Component)<obj.component />编译为React.createElement(obj.component)
回答by Anders Ekdahl
@Alexandre Kirszenberggave a very good answer, just wanted to add another detail.
@Alexandre Kirszenberg给出了一个很好的答案，只是想添加另一个细节。
React used to contain a whitelist of well-known element names like divetc, which it used to differentiate between DOM elements and React components.
React 曾经包含一个众所周知的元素名称的白名单，例如divetc，用于区分 DOM 元素和 React 组件。
But because maintaining that list isn't all that fun, and because web components makes it possible to create custom elements, they made it a rule that all React components must start with a upper case letter, or contain a dot.
但是因为维护这个列表并不是那么有趣，而且因为 Web 组件可以创建自定义元素，所以他们制定了一个规则，所有 React 组件必须以大写字母开头，或者包含一个点。
回答by 0leg
From the official React reference:
从官方反应参考：
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
当元素类型以小写字母开头时，它指的是一个内置组件，如或，并导致传递给 React.createElement 的字符串“div”或“span”。以大写字母开头的类型，例如 compile to React.createElement(Foo) 并对应于在 JavaScript 文件中定义或导入的组件。
Also note that:
另请注意：
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在将其用于 JSX 之前将其分配给一个大写的变量。
Which means one has to use:
这意味着必须使用：
const Foo = foo;before using fooas a Component element in JSX.
const Foo = foo;在foo用作 JSX 中的 Component 元素之前。
回答by Umair Ahmed
The first part of a JSXtag determines the type of the React element, basically there is some convention Capitalized, lowercase, dot-notation.
JSX标签的第一部分决定了 React 元素的类型，基本上有一些约定大写、小写、点符号。
Capitalized and dot-notation typesindicate that the JSXtag is referring to a React component,
so if you use the JSX <Foo />compile to React.createElement(Foo)
OR <foo.bar />compile to React.createElement(foo.bar)and correspond to a component defined or imported in your JavaScript file.
大写和点符号类型表示JSX标记指的是 React 组件，因此如果您使用 JSX <Foo />compile to React.createElement(Foo)
OR <foo.bar />compile toReact.createElement(foo.bar)并对应于在您的 JavaScript 文件中定义或导入的组件。
While the lowercase typeindicate to a built-in component like <div>or <span>and results in a string 'div'or 'span'passed to React.createElement('div').
而小写类型指示内置组件，如<div>或<span>并导致字符串'div'或'span'传递给React.createElement('div')。
React recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter,
assign it to a capitalized variable before using it in JSX.
React 建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在将其用于JSX.
回答by PKA
In JSX, React Classes are capitalized to make XML compatible, so that it is not mistaken for an HTML tag. If the react classes are not capitalized, it is an HTML tag as pre-defined JSX syntax.
在 JSX 中，React 类被大写以使 XML 兼容，因此不会被误认为是 HTML 标签。如果 react 类没有大写，则它是一个 HTML 标记，作为预定义的 JSX 语法。
