使用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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
JavaScript基本编码模式小结
May 23 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
Node.js Domain 模块实例详解
Mar 18 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 版本]
2007/03/20 PHP
php MySQL与分页效率
2008/06/04 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
Python变量和数据类型详解
2017/02/15 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
django 实现简单的插入视频
2020/04/07 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
python中_del_还原数据的方法
2020/12/09 Python
城市轨道专业个人求职信范文
2013/09/23 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
南京青奥会口号
2014/06/12 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫