需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
1). 如果性别没有指定, 默认为男
2). 如果年龄没有指定, 默认为18
第一步，定义组件标签并初始化显示组件标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/babel.min.js"></script> 10 </head> 11 <body> 12 <div id="test"></div> 13 </body> 14 </html> 15 <script type="text/babel"> 16 17 function PersonComponent(props){ 18 return ( 19 <ul> 20 <li>姓名:{props.name}</li> 21 <li>年龄:{props.age}</li> 22 <li>性别:{props.sex}</li> 23 </ul> 24 ) 25 } 26 const person={ 27 name:'张三', 28 age:19, 29 sex:'男', 30 } 31 ReactDOM.render(<PersonComponent name={person.name} age={person.age} sex={person.sex}/>,document.getElementById("test")); 32 </script>
第二步，对属性赋默认值，需求中，年龄和性别不是一定要传的，如果没有传，就要指定默认值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/prop-types.js"></script> 10 <script src="../js/babel.min.js"></script> 11 </head> 12 <body>
13 <div id="test"></div> 14 15 </body> 16 </html> 17 <script type="text/babel"> 18 19 function PersonComponent(props){ 20 return ( 21 <ul> 22 <li>姓名:{props.name}</li> 23 <li>年龄:{props.age}</li> 24 <li>性别:{props.sex}</li> 25 </ul> 26 ) 27 } 28 //设置默认属性值 29 PersonComponent.defaultProps={ 30 age:18, 31 sex:'男', 32 } 33 34 const person1={ 35 name:'张三', 36 } 37 ReactDOM.render(<PersonComponent name={person1.name}/>,document.getElementById("test"));//不传age和sex时，使用默认值 38 39 </script>
第三步，对 props 中的属性进行类型限制和必要性限制
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/prop-types.js"></script> 10 <script src="../js/babel.min.js"></script> 11 </head> 12 <body> 13 <div id="test1"></div> 14 <div id="test2"></div> 15 </body> 16 </html> 17 <script type="text/babel"> 18 19 function PersonComponent(props){ 20 return ( 21 <ul> 22 <li>姓名:{props.name}</li> 23 <li>年龄:{props.age}</li> 24 <li>性别:{props.sex}</li> 25 </ul> 26 ) 27 } 28 //设置默认属性值 29 PersonComponent.defaultProps={ 30 age:18, 31 sex:'男', 32 } 33 //对props中的属性值进行类型限制和必要性限制 34 PersonComponent.propTypes={ 35 name:PropTypes.string.isRequired, 36 age:PropTypes.number, 37 sex:PropTypes.string, 38 } 39 const person1={ 40 name:'张三', 41 } 42 ReactDOM.render(<PersonComponent name={person1.name}/>,document.getElementById("test1"));//不传age和sex时，使用默认值 43 44 const person2={ 45 age:'20', 46 sex:'女', 47 } 48 ReactDOM.render(<PersonComponent age={person2.age} sex={person2.sex} />, document.getElementById("test2")); 49 //error1:The prop `name` is marked as required in `PersonComponent`, but its value is `undefined`.不传name的情况 50 //error2:Invalid prop `age` of type `string` supplied to `PersonComponent`, expected `number`.age类型不是number时的情况 51 52 </script>
补充，ES6扩展运算符，简介语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/prop-types.js"></script> <script src="../js/babel.min.js"></script> </head> <body> <div id="test"></div>
</body> </html> <script type="text/babel"> function PersonComponent(props){ return ( <ul> <li>姓名:{props.name}</li> <li>年龄:{props.age}</li> <li>性别:{props.sex}</li> </ul> ) } const person3={ name:'lisa', age:20, sex:'女', } ReactDOM.render(<PersonComponent {...person3}/>,document.getElementById("test"));//...扩展属性 </script>
...的作用：
1，打包，
function fn(...as){ } fn(1,2,3)
as 是一个数组， as[ 1, 2, 3 ]
2,解包
const arr1=[1,2,3],
const arr2=['a',...arr1,'b']
arr2=[ 'a' , 1, 2, 3 , 'b' ]
类定义组件的方式实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/prop-types.js"></script> 10 <script src="../js/babel.min.js"></script> 11 </head> 12 <body> 13 <div id="test1"></div> 14 <div id="test2"></div>
<div id="test3"></div> 15 </body> 16 </html> 17 <script type="text/babel"> 18 19 /* 20 需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明 21 1). 如果性别没有指定, 默认为男 22 2). 如果年龄没有指定, 默认为18 23 */ 24 //ES6类的方式定义组件,注意props是组件对象中的属性，是this的 25 class PersonComponent extends React.Component { 26 render() { 27 return ( 28 <ul> 29 <li>姓名: {this.props.name}</li> 30 <li>性别: {this.props.sex}</li> 31 <li>年龄: {this.props.age}</li> 32 </ul> 33 ) 34 } 35 } 36 //设置默认属性值 37 PersonComponent.defaultProps={ 38 age:18, 39 sex:'男', 40 } 41 //对props中的属性值进行类型限制和必要性限制 42 PersonComponent.propTypes={ 43 name:PropTypes.string.isRequired, 44 age:PropTypes.number, 45 sex:PropTypes.string, 46 } 47 const person1={ 48 name:'张三', 49 } 50 ReactDOM.render(<PersonComponent name={person1.name}/>,document.getElementById("test1"));//不传age和sex时，使用默认值 51 52 const person2={ 53 age:'20', 54 sex:'女', 55 } 56 ReactDOM.render(<PersonComponent age={person2.age} sex={person2.sex} />, document.getElementById("test2")); 57 //error1:The prop `name` is marked as required in `PersonComponent`, but its value is `undefined`.不传name的情况 58 //error2:Invalid prop `age` of type `string` supplied to `PersonComponent`, expected `number`.age类型不是number时的情况 59 60 const person3={ 61 name:'lisa', 62 age:20, 63 sex:'女', 64 } 65 ReactDOM.render(<PersonComponent {...person3} />,document.getElementById("test3"));//...扩展属性 66 </script>