使用React代码动态生成栅格布局的方法-创新互联
这篇文章主要讲解了使用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()}
新闻名称:使用React代码动态生成栅格布局的方法-创新互联
本文路径:http://scyanting.com/article/dsosis.html