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

2020/11/10 21:41 · javascript ·  · 0评论

我正在使用JSBin上的ReactJS框架

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

例如,以下内容不呈现:

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

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

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

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

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

参见HTML标签与React组件

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

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

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

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

官方的React参考

当元素类型以小写字母开头时,它指的是诸如或的内置组件,并导致将字符串'div'或'span'传递给React.createElement。以大写字母开头的类型,例如编译为React.createElement(Foo)并对应于在JavaScript文件中定义或导入的组件。

另请注意:

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

这意味着必须使用:

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

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

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

小写字母类型则指示诸如<div>的内置组件<span>并导致字符串'div''span'传递给React.createElement('div')

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

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

本文地址:http://javascript.askforanswer.com/reactjszujianmingchengbixuyidaxiezimukaitouma.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!