React - 实现一个盒子模型的展示效果
我在之前的文章中演示了如何使用纯 HTML5 代码实现一个盒子模型效果展示:HTML5 - flexbox布局样例(实现一个盒子模型的效果展示)。本文演示如何使用 JSX 代码实现同样的功能。
1,样例效果图
2,样例代码
(1)对于不同的显示层级,我们分别定义了 MargginBox、BorderBox、PaddingBox 和 ElementBox 这4个组件。(2)同时定义一个最外层的容器组件 BoxContainer,将上面4个子组件嵌套包含进来,并最终渲染到页面上。
(3)由于 MargginBox、BorderBox、PaddingBox 这3个组件的显示效果相近,所以我们将公共的部分提取出来成为一个新组件(Box)供它们调用。
(4)这里注意一下 {this.props.children},它会将当前组件内部的子组件全部渲染出来。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>hangge</title> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> <style> .height50 { height: 50px; } .height400 { height: 400px; } .height300 { height: 300px; } .height200 { height: 200px; } .height100 { height: 100px; } .width400 { width: 400px; } .bgorange { background-color: #F9CC9D; } .bgyellow { background-color: #FDDD9B; } .bggreen { background-color: #C2CF8A; } .margginBox { position: absolute; top: 100px; padding-left: 7px; padding-right: 7px; } .box { display: flex; flex-direction: column; flex: 1; position: relative; color: #000000; line-height: 1em; } .label { top: 0; left: 0; padding: 0 3px 3px 0; position: absolute; background-color: #000000; color: white; line-height: 1em; } .top { width: 100%; justify-content: center; display: flex; align-items: center; } .bottom { width: 100%; display: flex; justify-content: center; align-items: center; } .left { width: 50px; display: flex; justify-content: space-around; align-items: center; } .right { width: 50px; display: flex; justify-content: space-around; align-items: center; } .heightdashed { position: absolute; right: 20px; height: 100%; border-left: 1px solid #C0C0C0; } .widthdashed { position: absolute; left: 0px; width: 100%; bottom: 24px; border-top: 1px solid #C0C0C0; } .borderBox { flex: 1; display: flex; justify-content: space-between; } .paddingBox { flex: 1; display: flex; justify-content: space-between; } .elementBox { flex: 1; display: flex; justify-content: space-between; } .measureBox { flex: 1; display: flex; justify-content: flex-end; align-items: flex-end; } </style> </head> <body> <div id="example"></div> <script type="text/babel"> var BoxContainer = React.createClass({ render:function(){ return ( <MargginBox> <BorderBox> <PaddingBox> <ElementBox> </ElementBox> </PaddingBox> </BorderBox> </MargginBox> ) } }) var MargginBox = React.createClass({ render:function(){ return ( <span className="margginBox"> <Box childName="borderBox" height="height400" width="width400" boxName="margin" classBg="bgorange"> {this.props.children} </Box> </span> ) } }) var BorderBox = React.createClass({ render:function(){ return ( <Box childName="paddingBox" height="height300" width="width300" boxName="border" classBg="bgyellow" > {this.props.children} </Box> ) } }) var PaddingBox = React.createClass({ render:function(){ return ( <Box childName="elementBox" height="height200" width="width200" boxName="padding" classBg="bggreen" > {this.props.children} </Box> ) } }) var ElementBox = React.createClass({ render:function(){ return ( <span className="box height100"> <span className="label">element</span> <span className="widthdashed"></span> <span className="heightdashed"></span> <span className="measureBox" > <span className="right">height</span> </span> <span className="bottom height50">width</span> </span> ) } }) var Box = React.createClass({ render:function(){ var parentClass = "box "+this.props.width+" "+ this.props.height; var topClass = "top height50 "+this.props.classBg; var leftClass = "left "+this.props.classBg; var rightClass = "right "+this.props.classBg; var bottomClass = "bottom height50 "+this.props.classBg; return ( <span className= {parentClass}> <span className="label">{this.props.boxName}</span> <span className={topClass}>top</span> <span className={this.props.childName}> <span className={leftClass}>left</span> {this.props.children} <span className={rightClass}>right</span> </span> <span className={bottomClass}>bottom</span> </span> ) } }) ReactDOM.render(<BoxContainer/> ,document.getElementById("example")); </script> </body> </html>