REACT--props的使用

1.每个组件对象都会有props

2.每个组件对象的属性都会保存在props中

3.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://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
14 </head>
15 
16 <body>
17     <div id="app"></div>
18     <script type="text/babel">
19         function Study(props){
20             return(
21                 <ul>
22                     <li>{props.react}</li>
23                     <li>{props.vue}</li>
24                 </ul>
25             )
26         }
27         let p = {react:"学习react",vue:"学习vue"}
28         ReactDOM.render(<Study {...p} />,document.getElementById("app"))
29     </script>
30 </body>
31 
32 </html>
 //类式组件传入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://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
14 </head>
15 
16 <body>
17     <div id="app"></div>
18     <script type="text/babel">
19         class Study extends React.Component{
20 
21             render(){
22                 return(
23                     <ul>
24                     　　<li>{this.props.react}</li>
25                     　　<li>{this.props.vue}</li>
26                　　 </ul>
27                 )
28             }
29         }
30         let p = {react:"学习react",vue:"学习vue"}
31         ReactDOM.render(<Study {...p} />,document.getElementById("app"))
32     </script>
33 </body>
34 
35 </html>

 

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