当前位置: > > > React - 实现一个盒子模型的展示效果

React - 实现一个盒子模型的展示效果

我在之前的文章中演示了如何使用纯 HTML5 代码实现一个盒子模型效果展示:HTML5 - flexbox布局样例(实现一个盒子模型的效果展示)。本文演示如何使用 JSX 代码实现同样的功能。

1,样例效果图


2,样例代码

(1)对于不同的显示层级,我们分别定义了 MargginBoxBorderBoxPaddingBox ElementBox 这4个组件。
(2)同时定义一个最外层的容器组件 BoxContainer,将上面4个子组件嵌套包含进来,并最终渲染到页面上。
(3)由于 MargginBoxBorderBoxPaddingBox 这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