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

我正在使用JSBin上的ReactJS框架。

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

例如，以下内容不呈现：

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

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

但是，一旦我替换为fml，Fml它就会渲染。

我不能以小写字母开头的标签有原因吗？

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

参见HTML标签与React组件。

<component />编译为React.createElement('component')（html标记）
<Component /> 编译为 React.createElement(Component)
<obj.component /> 编译为 React.createElement(obj.component)

@Alexandre Kirszenberg给出了一个很好的答案，只是想添加另一个细节。

React曾经包含众所周知的元素名称（如divetc）的白名单，用于区分DOM元素和React组件。

但是因为维护该列表并不是一件很有趣的事，并且因为Web组件使创建自定义元素成为可能，所以它们规定所有React组件必须以大写字母开头或包含点。

从官方的React参考：

当元素类型以小写字母开头时，它指的是诸如或的内置组件，并导致将字符串'div'或'span'传递给React.createElement。以大写字母开头的类型，例如编译为React.createElement（Foo）并对应于在JavaScript文件中定义或导入的组件。

另请注意：

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

这意味着必须使用：

const Foo = foo;在foo用作JSX中的Component元素之前。

JSX标签的第一部分确定React元素的类型，基本上有一些约定大写，小写，点符号。

大写和点符号类型表示该JSX标记引用的是React组件，因此，如果您使用JSX<Foo />编译为React.createElement(Foo)
OR
<foo.bar />编译React.createElement(foo.bar)并对应于在JavaScript文件中定义或导入的组件，

而小写字母类型则指示诸如<div>或的内置组件，<span>并导致字符串'div'或'span'传递给React.createElement('div')。

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

在JSX中，大写的React类使XML兼容，因此不会将其误认为HTML标记。如果react类没有大写，则它是一个HTML标记，作为预定义的JSX语法。

本文地址：http://javascript.askforanswer.com/reactjszujianmingchengbixuyidaxiezimukaitouma.html
文章标签：javascript , reactjs
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载