React學習小結（二）

一、組件的嵌套

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title></title>
 6 <script src="react.min.js" type="text/javascript" charset="utf-8"></script>
 7 <script src="react-dom.min.js" type="text/javascript" charset="utf-8"></script>
 8 <script src="browser.min.js" type="text/javascript" charset="utf-8"></script>
 9 <style type="text/css">
10 *{margin:0;padding:0;list-style: none;}
11 html,body,#out,#inner{width:100%;height:100%;overflow:hidden;}
12 #inner{display:-webkit-box;-webkit-box-orient:vertical;}
13 </style>
14 </head>
15 <body>
16     <div id="out"></div>
17 </body>
18 <script type="text/babel">
19 var sty={
20     sty1:{height:'50px',background:'orange','text-align':'center','line-height':'50px'},
21     sty2:{height:'30px',background:'yellow','text-align':'center','line-height':'30px',overflow:'hidden'},
22     sty3:{height:'30px',float:'left',width:'25%','box-sizing':'border-box',border:'1px solid red'},
23     sty4:{background:'green',WebkitBoxFlex: 1}
24     
25 }    
26     var Demo=React.createClass({
27         render:function(){
28             return(
29                 <div id="inner">
30                     <Head/>
31                     <Nav/>
32                     <Con/>
33                     <Footer/>
34                 </div>
35             )
36         }
37     })
38     var Head=React.createClass({
39         render:function(){
40             return(
41                 <div style={sty.sty1}>react組件頭部</div>
42             )
43         }
44     })
45     var Nav=React.createClass({
46         render:function(){
47             return(
48                 <ul style={sty.sty2}>
49                     <li style={sty.sty3}>首頁</li>
50                     <li style={sty.sty3}>圖片</li>
51                     <li style={sty.sty3}>藝術</li>
52                     <li style={sty.sty3}>音樂</li>
53                 </ul>
54             )
55         }
56     })
57     var Con=React.createClass({
58         render:function(){
59             return(
60                 <div style={sty.sty4}>內容</div>
61             )
62         }
63     })
64     var Footer=React.createClass({
65         render:function(){
66             return(
67                 <ul style={sty.sty2}>
68                     <li style={sty.sty3}>首頁</li>
69                     <li style={sty.sty3}>首頁</li>
70                     <li style={sty.sty3}>首頁</li>
71                     <li style={sty.sty3}>首頁</li>
72                 </ul>
73             )
74         }
75     })
76     ReactDOM.render(<Demo/>,document.getElementById('out'))
77 </script>
78 </html>

在做移動端的時候，有時候我們可以把React與mui混合使用，但mui中的classname記得換成className,另外三大框架（vue/react/angular）都可以與bootstrap搭配使用，

在一些簡單的頁面中我們可以使用bootstrap的可視化組件快速搭建原型頁面概圖。工具鏈接：http://www.bootcss.com/p/layoutit/#

轉載于:https://www.cnblogs.com/ztl0918/p/6918929.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/252604.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/252604.shtml
英文地址，請注明出處：http://en.pswp.cn/news/252604.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！