//类式组件的props校验方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 9 10 <!-- 该文件向外暴露了一个对象 React-Dom --> 11 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 12 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 13 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 14 <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script> 15 16 </head> 17 18 <body> 19 <div id="app"></div> 20 <script type="text/babel"> 21 class Study extends React.Component{ 22 static propTypes = { 23 react:PropTypes.string.isRequired, 24 vue:PropTypes.string.isRequired 25 } 26 static defaultProps = { 27 // react:"react" 28 } 29 render(){ 30 return( 31 <ul> 32 <li>{this.props.react}</li> 33 <li>{this.props.vue}</li> 34 </ul> 35 ) 36 } 37 } 38 let p = {vue:"学习vue"} 39 ReactDOM.render(<Study {...p} />,document.getElementById("app")) 40 </script> 41 </body> 42 43 </html>
//函数式组件props校验规则类式组件也可以这么写
//在react中函数实例化会默认开启严格模式，严格模式下函数this指向undefined，函数能接收props是因为函数能接收外部传值
//函数组件不能初始化states 和获取this上一切属性及方法(除外部传人的props)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 9 10 <!-- 该文件向外暴露了一个对象 React-Dom --> 11 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 12 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 13 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 14 <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script> 15 16 </head> 17 18 <body> 19 <div id="app"></div> 20 <script type="text/babel"> 21 function Study(props){ 22 return( 23 <ul> 24 <li>{props.react}</li> 25 <li>{props.vue}</li> 26 </ul> 27 ) 28 } 29 Study.propTypes = { 30 react:PropTypes.string.isRequired, 31 vue:PropTypes.string.isRequired 32 } 33 34 let p = {vue:"学习vue"} 35 ReactDOM.render(<Study {...p} />,document.getElementById("app")) 36 </script> 37 </body> 38 39 </html>
原文：https://www.cnblogs.com/chenxuecheng/p/14279270.html