使用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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
angular2使用简单介绍
Mar 01 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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
PHP 危险函数解释 分析
2009/04/22 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
js 操作css实现代码
2009/06/11 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python单链表的简单实现方法
2014/09/23 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python3实现购物车功能
2018/04/18 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
对python的输出和输出格式详解
2018/12/08 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
wxpython绘制圆角窗体
2019/11/18 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
统计员岗位职责
2013/11/14 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
红色电影观后感
2015/06/18 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
教你用python实现12306余票查询
2021/06/30 Python
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python