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

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

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

例如，以下内容不会显示:

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


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

但是只要我用 Fml代替 fml，它就会渲染。

为什么我不能用小写字母开始标签呢？

71915 次浏览
小开
最佳答案

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

参见 HTML 标签与 React 组件。

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

@ Alexandre Kirszenberg 给出了一个很好的答案，只是想补充一些细节。

React 用于包含一个著名元素名称的白名单，如 div等，它用于区分 DOM 元素和 React 组件。

但是因为维护这个列表并不那么有趣，而且因为 Web 组件使得创建自定义元素成为可能，所以他们将其改为 所有 React 组件必须以大写字母开头或包含点的规则。

小开

在 JSX 中，React Class 被大写以使 XML 兼容，这样它就不会被误认为是 HTML 标记。如果反应类没有大写，那么它就是作为预定义的 JSX 语法的 HTML 标记。

小开

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

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

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

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

小开

来自 官方反应参考文献:

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

还要注意:

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

这意味着必须使用:

在 JSX 中使用 foo作为组件元素之前，先使用 const Foo = foo;。

小开

用户定义组件必须大写

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

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

例如，此代码不会按预期运行:

import React from 'react';


// Wrong! This is a component and should have been capitalized:
function hello(props) {
// Correct! This use of <div> is legitimate because div is a valid HTML tag:
return <div>Hello {props.toWhat}</div>;
}


function HelloWorld() {
// Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
return <hello toWhat="World" />;
}

为了解决这个问题，我们将 Hello 重命名为 Hello，并在以下情况下使用 <Hello /> 指的是:

import React from 'react';


// Correct! This is a component and should be capitalized:
function Hello(props) {
// Correct! This use of <div> is legitimate because div is a valid HTML tag:
return <div>Hello {props.toWhat}</div>;
}


function HelloWorld() {
// Correct! React knows <Hello /> is a component because it's capitalized.
return <Hello toWhat="World" />;
}

这是 参考文献


提交答案