首页 文章

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

提问于
浏览 次
100

我在JSBin上玩ReactJS框架 .

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

例如，以下内容不呈现：

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

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

但是当我用 Fml 替换 fml 时它会渲染 .

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

reactjs

5 回答

  • 2

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

    见HTML tags vs React Components .

    • <component /> 编译为 React.createElement('component') （html标签）

    • <Component /> 编译为 React.createElement(Component)

    • <obj.component /> 编译为 React.createElement(obj.component)

    回复于
  • 1

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

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

    回复于
  • 35

    来自official React reference：

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

    另请注意：

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

    这意味着必须使用：

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

    回复于
  • 4

    JSX 标记的第一部分确定了React元素的类型，基本上有一些约定 Capitalized, lowercase, dot-notation .

    Capitalized and dot-notation types 表示 JSX 标记是指React组件，因此如果使用JSX <Foo /> 编译为 React.createElement(Foo)
    要么
    <foo.bar /> 编译为 React.createElement(foo.bar) 并对应于JavaScript文件中定义或导入的组件 .

    虽然 lowercase type 指示内置组件（如 <div> 或 <span> ）并导致字符串 'div' 或 'span' 传递给 React.createElement('div') .

    React建议使用大写字母命名组件 . 如果您的组件以小写字母开头，请在 JSX 中使用之前将其分配给大写变量 .

    回复于
  • 140

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

    回复于

相关问题