使用React代码动态生成栅格布局的方法


Posted in Javascript onMay 24, 2020

作为 TerminalMACS 的一个子进程模块 - React Web管理端,使用Ant Design Pro作为框架。

本文应用到的知识1.样式文件less中方法的使用2.for循环创建按钮和栅格布局(flex布局)

1. 最终效果及源码链接

作为前端新手的我,做下面这个简单功能花了好几天时间,问了不少前端大佬(大佬们应该要不到半个小时,惭愧惭愧),现在回想问的问题都很基础(有点丢人,哈哈),多谢了哦。

先看看效果

使用React代码动态生成栅格布局的方法

点击浏览源码:开源项目对应源码

2. 代码简单讲解

2.1 TypeScript代码

./src/pages/Grid/DynamicGridPage/index.tsx

import React from 'react';
import styles from './index.less';
import { Button, Card } from 'antd';

interface IVideoPanelProps {}

interface IVideoPanelSate {
 cardCount: number;
}

class VideoPanel extends React.Component<IVideoPanelProps, IVideoPanelSate> {
 constructor(props: Readonly<{}>) {
  super(props);
  this.state = {
   cardCount: 1,
  };
 }

 // 动态生成Grid
 createCard() {
  var res = [];
  for (var i = 0; i < this.state.cardCount * this.state.cardCount; i++) {
   res.push(<Card className={styles['video_panel' + this.state.cardCount]} />);
  }
  return res;
 }

 // 动态生成控制按钮
 createControlButon() {
  var res = [];
  const btnCount = 4;
  for (let i = 1; i <= btnCount; i++) {
   res.push(
    <Button
     key={i}
     className={styles['control_Button']}
     type="primary"
     onClick={() => {
      this.changeCardCount(i);
     }}
    >
     {i + '*' + i}
    </Button>,
   );
  }

  return res;
 }

 // 修改显示的格子数
 changeCardCount(count: any) {
  this.setState({
   cardCount: count,
  });
 }

 render() {
  return (
   <div className={styles.main}>
    <div className={styles.main_child}>
     <div className={styles.left}>
      <div className={styles.left_top}></div>
      <div className={styles.left_bottom}></div>
     </div>
     <div className={styles.right}>
      <div className={styles.right_top}>{this.createCard()}</div>
      <div className={styles.right_bottom}>{this.createControlButon()}</div>
     </div>
    </div>
   </div>
  );
 }
}

export default VideoPanel;

代码不多,for循环生成控制按钮及栅格(未使用antd的Grid布局,简单使用div布局,flex很香),简化了很多代码。

2.2 less样式文件

./src/pages/Grid/DynamicGridPage/index.less

@import '~antd/es/style/themes/default.less';

.main {
 position: absolute;
 width: 100%;
 height: 100%;
 background: red;
}

@ptcWidth: 250px;
@btnAreaHeight: 50px;
@videoPanelMargin: 5px;

.main_child {
 display: flex;
 height: 100%;
}

.left {
 width: @ptcWidth;
 height: 100%;
 background: green;
}

.left_top {
 width: 100%;
 height: @ptcWidth;
 background: orange;
}

.left_bottom {
 width: 100%;
 height: calc(100% - @ptcWidth);
 background: #ccc;
}

.right {
 width: calc(100% - @ptcWidth);
 height: 100%;
 background: #f60;
}

.right_top {
 width: 100%;
 height: calc(100% - @btnAreaHeight);
 background: blue;
 display: flex;
 flex-wrap: wrap;
}

.right_bottom {
 width: 100%;
 height: @btnAreaHeight;
 background: #f90;
}

.control_Button {
 margin: 2px;
}

.video_panel(@count) {
 width: calc(100% / @count - @videoPanelMargin * 2);
 height: calc(100% / @count - @videoPanelMargin * 2);
 margin: @videoPanelMargin;
}

// 1*1
.video_panel1 {
 .video_panel(1);
}

// 2*2
.video_panel2 {
 .video_panel(2);
}

// 3*3
.video_panel3 {
 .video_panel(3);
}

// 4*4
.video_panel4 {
 .video_panel(4);
}

1 * 1、2 * 2、3 * 3、4 * 4 生成的每个栅格的样式格式类似,只是长、宽比例区别,定义了方法(.video_panel(@count)),这是less的语法,极大的扩展了css功能,非常方便。

3. 关于TerminalMACS及本React Web管理端

3.1. TermainMACS

多终端资源管理与检测系统(后续可能转而写成博客系统),包含多个子进程模块,目前开发了Xamarin.Forms客户端、WPF管理端、React Web管理端、.NET Core WEB API服务端,下一步继续完善WPF管理端(IdentityServer 4研究中)。

3.2. React Web管理端

作为TerminalMACS系统的一个子进程模块,目前使用 Ant Design Pro 搭建了框架,在平时工作中,添加一些测试Demo。

4. 关于项目开源开源项目地址:https://github.com/dotnet9/TerminalMACS

官方网站:https://dotnet9.com

总结

到此这篇关于使用React代码动态生成栅格布局的方法的文章就介绍到这了,更多相关react 动态生成栅格布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
JavaScript函数基础详解
Feb 03 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
ES6对象操作实例详解
May 23 #Javascript
ES6函数和数组用法实例分析
May 23 #Javascript
ES6箭头函数和扩展实例分析
May 23 #Javascript
ES6新增的数组知识实例小结
May 23 #Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 #Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 #Javascript
JavaScript组合模式---引入案例分析
May 23 #Javascript
You might like
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
JavaScript静态的动态
2006/09/18 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
Python导入txt数据到mysql的方法
2015/04/08 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
html5时钟实现代码
2010/10/22 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
毕业生找工作自荐书
2014/06/30 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
培训班开班主持词
2015/07/02 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书