使用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 相关文章推荐
提示$ is not defined错误分析及解决
Apr 09 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jquery validate表单验证插件
Sep 06 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
Angular实现表单验证功能
Nov 13 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php fread读取文件注意事项
2016/09/24 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
jQuery 选择器理解
2010/03/16 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
python创建和使用字典实例详解
2013/11/01 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python requests设置代理的方法步骤
2020/02/23 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
django中related_name的用法说明
2020/05/20 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
服务生自我鉴定
2014/01/22 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
诉前财产保全担保书
2014/05/20 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
住房抵押登记委托书
2014/09/27 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
勤俭节约主题班会
2015/08/13 职场文书
公司年会晚会开幕词
2019/04/02 职场文书