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

2022-08-30 02:02:10

我正在JSBin上使用ReactJS框架。

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

例如,以下内容不会呈现:

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

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

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

我不能以小写字母开始标签的原因是什么?


答案 1

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

请参阅 HTML 标记与 React 组件

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

答案 2

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

React曾经包含一个众所周知的元素名称的白名单,如etc,它用来区分DOM元素和React组件。div

但是因为维护这个列表并不是那么有趣,而且因为Web组件可以创建自定义元素,所以他们制定了一个规则,即所有React组件必须以大写字母开头,或者包含一个点