react入门----组件的基础用法
Posted Ethan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react入门----组件的基础用法相关的知识,希望对你有一定的参考价值。
1、组件
1 <!-- React 允许将代码封装成组件(component),然后像插入普通 html 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类 --> 2 var HelloMessage = React.createClass({ 3 render: function() { 4 return <h1>Hello {this.props.name}</h1> 5 } 6 }) 7 <!-- 变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时,会自动生成 HelloMessage 的一个实例(下文的"组件"都指组件类的实例)。所有组件类都必须有自己的 render 方法,用于输出组件。 --> 8 ReactDOM.render( 10 <HelloMessage name="John" />, 11 document.getElementById(‘example‘) 12 )
2、组件要注意的两个规则(a.组件名的第一个字母,必须大写,否则会报错,b.组件类只能包含一个顶层标签,否则也会报错)
var HelloMessage = React.createClass({ render: function() { return <h1> Hello {this.props.name} </h1><p> some text </p> } }) <!-- 上面代码会报错,因为HelloMessage组件包含了两个顶层标签:h1和p。 --> <!-- 组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloMessage name="John"> ,
就是 HelloMessage 组件加入一个 name 属性,值为 John。组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。 -->
3.this.props.children的使用和注意事项
a.this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。
b.React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法。
1 var NyComponent = React.createClass({ 2 render: function () { 3 return( 4 <ol> 5 <!-- this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点 --> 6 React.Children.map(this.props.children, function(child) { 7 return <li>{child}</li> 8 }) 9 } 10 </ol>) 11 } 12 }) 13 <!-- 上面代码的 NyComponent 组件有两个 span 子节点,它们都可以通过 this.props.children 读取 --> 14 <!-- 这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。 --> 15 <!-- React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法, --> 16 ReactDOM.render( 17 <NyComponent> 18 <span>hello</span> 19 <span>world</span> 20 </NyComponent>, 21 document.getElementById(‘container‘) 22 )
4.PropTypes
a.组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。
b.组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求
1 <!-- 组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。 --> 2 <!-- /组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求 --> 3 var MyTestComponent = React.createClass({ 4 propTypes: function () { 5 title: React.PropTypes.string.isRequired 6 }, 7 render: function () { 8 return <h1> {this.props.title} </h1> 9 } 10 }) 11 <!-- 上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。 --> 12 <!-- 这样一来,title属性就通不过验证了。控制台会显示一行错误信息。 --> 13 var data = 123 14 ReactDOM.render(<MyTestComponent title={data}/>,document.getElementById(‘container‘)) 15 <!-- 此外,getDefaultProps 方法可以用来设置组件属性的默认值。 --> 16 var MyTitle = React.createClass({ 17 getDefaultProps : function () { 18 return { 19 title : ‘Hello World‘ 20 }; 21 }, 22 23 render: function() { 24 return <h1> {this.props.title} </h1>; 25 } 26 }); 27 28 ReactDOM.render( 29 <MyTitle />, 30 document.body 31 );
以上是关于react入门----组件的基础用法的主要内容,如果未能解决你的问题,请参考以下文章