使用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        {i + '*' + i},     );    }      return res;   }     // 修改顯示的格子數   changeCardCount(count: any) {    this.setState({     cardCount: count,    });   }     render() {    return ({this.createCard()}{this.createControlButon()});   }  }    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