使用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 相关文章推荐
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 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封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php实现的农历算法实例
2015/08/11 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php批量删除操作代码分享
2017/02/26 PHP
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
详解Node 定时器
2018/02/26 Javascript
vue.js中created方法作用
2018/03/30 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Python中logger日志模块详解
2020/08/04 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
小学运动会口号
2014/06/07 职场文书
2014年资料员工作总结
2014/11/18 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书