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

React学习小结（二）相关推荐

react ui框架_Web开发 React 学习（二十）连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建测开技能--Web开发 React 学习(三)元素的渲染测开技能--Web开发 R ...
JavaSE学习小结二
JavaSE学习小结二记录学习----------JavaSE模块三&四其中大部分是一些工具类,会将常用方法及其功能描述整理成表格方便日后查阅文章目录 JavaSE学习小结二一.Obj ...
React学习笔记二：实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
React学习笔记二——react-router
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一个关于react-router的demo,因为不喜欢下载太多的依赖包,所以就直接引得js,解析会比较慢一些. 首先先 ...
React学习笔记(二) | 受控组件
React组件目标能够知道受控组件是什么能够写出受控组件了解非受控组件表单处理受控组件(★★★) HTML中的表单元素是可输入的,也就是有自己的可变状态而React中可变状态通常保存在s ...
React学习笔记二通过柯里化函数实现带参数的事件绑定
class Login extends React.Component {state = {username: '',password: ''}saveFormData = (type) => ...
React学习（三）：通过 React 编写名片组件（React属性）
阿里云服务器0元试用,首购低至0.9元/月起 [开发云]年年都是折扣价,不用四处薅羊毛前置内容阅读 React学习(二):编写 React 组件并成功挂载效果预览: 1. 启动 my-projec ...
安卓系统安全学习小结（二）
提示: 文章目录前言一.安卓系统小结二.检测工具的了解与学习 1.Monkeyrunner 2.重打包技术 3.检测方法 4.安卓应用攻击类型总结前言随着互联网不断发展,我们每天使用的手机 ...
React学习(六)-React中组件的数据-state
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 ID:suibichuanji 点击下方 ...

React学习小结（二）

React学习小结（二）相关推荐

最新文章

热门文章