我正在使用JSBin上的ReactJS框架。
我注意到,如果我的组件名称以小写字母开头,那么它将不起作用。
例如,以下内容不呈现:
var fml = React.createClass({
render: function () {
return <a href='google.com'>Go</a>
}
});
React.render(<fml />, document.body);
但是,一旦我替换为fml
,Fml
它就会渲染。
我不能以小写字母开头的标签有原因吗?
在JSX中,小写标签名称被认为是HTML标签。但是,带点(属性访问器)的小写标记名称不是。
<component />
编译为React.createElement('component')
(html标记)<Component />
编译为React.createElement(Component)
<obj.component />
编译为React.createElement(obj.component)
@Alexandre Kirszenberg给出了一个很好的答案,只是想添加另一个细节。
React曾经包含众所周知的元素名称(如div
etc)的白名单,用于区分DOM元素和React组件。
但是因为维护该列表并不是一件很有趣的事,并且因为Web组件使创建自定义元素成为可能,所以它们规定所有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语法。
文章标签:javascript , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!