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

JavaScript

Sam十三

2020-03-11

我正在使用JSBin上的ReactJS框架

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

例如,以下内容不呈现:

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

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

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

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

第742篇《ReactJS组件名称必须以大写字母开头吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
L西里 2020.03.11

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

蛋蛋L 2020.03.11

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android