使用React代码动态生成栅格布局的方法
作为 TerminalMACS 的一个子进程模块 - React Web管理端,使用Ant Design Pro作为框架。
本文应用到的知识1.样式文件less中方法的使用2.for循环创建按钮和栅格布局(flex布局)
1. 最终效果及源码链接
作为前端新手的我,做下面这个简单功能花了好几天时间,问了不少前端大佬(大佬们应该要不到半个小时,惭愧惭愧),现在回想问的问题都很基础(有点丢人,哈哈),多谢了哦。
先看看效果
点击浏览源码:开源项目对应源码
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 动态生成栅格布局内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 本篇文章主要介绍了React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- React 是由 Facebook 软件工程师 Jordan Walke 创建,React 的第一个版本在七年前问世,现在,Facebook 负责维护,本文给大家介绍React 并发功能体验前端并发模式的问题,感兴趣的朋友跟随小编一起看看吧...2021-07-02