Question

我在JSBin上使用ReactJS框架。

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

例如，以下内容不呈现：

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

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

但是，只要我将fml替换为Fml，它就会渲染。

有没有理由我不能用小写字母开始标记？

Answer 1

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

请参阅HTML tags vs React Components。

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

Answer 2

Morphaus给出了一个非常好的答案，只想添加另一个细节。 React用于包含着名元素名称的白名单，如div等，用于区分DOM元素和React组件。

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

Answer 3

来自official React reference：

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

另请注意：

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

这意味着必须使用：

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

foo。

Answer 4

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

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

小写字母表示内置组件，例如<div>或<span>，并导致字符串'div'或'span'通过到React.createElement('div')。

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

Answer 5

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

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

5 个答案: