扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了使用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{ 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( ); } return res; } // 动态生成控制按钮 createControlButon() { var res = []; const btnCount = 4; for (let i = 1; i <= btnCount; i++) { res.push( , ); } return res; } // 修改显示的格子数 changeCardCount(count: any) { this.setState({ cardCount: count, }); } render() { return ( ); } } export default VideoPanel;{this.createCard()}{this.createControlButon()}
代码不多,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。
看完上述内容,是不是对使用React代码动态生成栅格布局的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流