1.在对年龄加一的操作时，会出现一丢丢的小问题
<li>age is{age+1}</li> const p={name:"laozhichi",age:19,address:"leizhou"}
这种类型就可以，得到20，但是不方便数据传入等等
<li>age is{age+1}</li> const p={name:"laozhichi",age:"19",address:"leizhou"}
这种类型相当于字符串拼接，得到191
<li>age is{age+1}</li> const p={name:"laozhichi",age:{19},address:"leizhou"}
这种类型就可以
2.对对象传入数据进行限制的时候
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script src="./react-resource/prop-types.js"></script> <script type="text/babel"> class Person extends React.Component{ render(){ const {name,age,address}=this.props; return ( <ul> <li>name is{name}</li> <li>age is{age+1}</li> <li>address is {address}</li> </ul> ) } } Person.propTypes={ name:PropTypes.string.isRequired, // 在这里表示name设置为字符串类型，并且必须要填写 } const p={age:19,address:"leizhou"} ReactDOM.render(<Person {...p}/>,document.getElementById("test")); </script> </body> </html>
如果不传入name数据,那么就会报错
3.传入函数对象的限制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script src="./react-resource/prop-types.js"></script> <script type="text/babel"> class Person extends React.Component{ render(){ const {name,age,address}=this.props; return ( <ul> <li>name is{name}</li> <li>age is{age+1}</li> <li>address is {address}</li> </ul> ) } } Person.propTypes={ name:PropTypes.string.isRequired, // 在这里表示name设置为字符串类型，并且必须要填写 sex:PropTypes.string, age:PropTypes.number, speak:PropTypes.func, // 在这里表示传入函数对象，记住在这里必须要用func，不用function，否则与内置对象相互冲突 } Person.defaaltProps={ sex:"不男不女", } // 在这里设置默认值 const p={age:19,address:"leizhou",speak:{speak}} // speak表示传入函数对象 ReactDOM.render(<Person {...p}/>,document.getElementById("test")); function speak(){ } </script> </body> </html>
