REACT--props校验规则 

//类式组件的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>

 

posted @ 2021-01-14 20:46  不秃头的代码狗  阅读(242)  评论(0)    收藏  举报