使用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(
     {
      this.changeCardCount(i);
     }}
    >
     {i + '*' + i}
    ,
   );
  }

  return res;
 }

 // 修改显示的格子数
 changeCardCount(count: any) {
  this.setState({
   cardCount: count,
  });
 }

 render() {
  return (
   

    

     

      

      

     
     

      
{this.createCard()}
      
{this.createControlButon()}
     
    
   
  );
 }
}

export default VideoPanel;