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


148

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

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

例如,以下内容不呈现:

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

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

但是,一旦我替换为fmlFml它就会渲染。

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


检查此问题的答案是否有更多细节:HTML未在浏览器中呈现-React js
Mayank Shukla

Answers:


199

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

参见HTML标签与React组件

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

11
再增加半小时到柜台。我疯了,试图渲染类似的东西let component = components[compType]; <component/>,并且出现了胡说八道的错误。
Zequez '16

2
我试过<components[name] />了也不行。
李冈谕

8
我不敢相信我之前没有注意到有这样的规则。
shaosh

7
这是一个坏主意。我在这里很客气。
罗尔夫

是的,这可能与n00bs格格不入,因为,如果调用Components而不是components,它们的可爱站点将没有错误但没有内容地加载!
olisteadman '19

45

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

React过去包含众所周知的元素名称(如divetc)的白名单,用于区分DOM元素和React组件。

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


3
很棒的信息,如果有官方文档参考,那就更好了。谢谢。
WaiKit Kung 2015年

什么时候改变了?
nolawi

11

官方的React参考

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

另请注意:

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

这意味着必须使用:

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


3

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


2

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.