React - 实现一个盒子模型的展示效果
作者：hangge | 2016-12-29 08:00
我在之前的文章中演示了如何使用纯 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>
全部评论（0）