使用React代碼動態(tài)生成柵格布局的方法

更新時間：2020年05月24日 09:05:54 作者：Dotnet9個人博客

這篇文章主要介紹了使用React簡短代碼動態(tài)生成柵格布局的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

作為 TerminalMACS 的一個子進(jìn)程模塊 - React Web管理端，使用Ant Design Pro作為框架。

本文應(yīng)用到的知識1.樣式文件less中方法的使用2.for循環(huán)創(chuàng)建按鈕和柵格布局(flex布局)

1. 最終效果及源碼鏈接

作為前端新手的我，做下面這個簡單功能花了好幾天時間，問了不少前端大佬（大佬們應(yīng)該要不到半個小時，慚愧慚愧），現(xiàn)在回想問的問題都很基礎(chǔ)（有點丟人，哈哈），多謝了哦。

先看看效果

點擊瀏覽源碼：開源項目對應(yīng)源碼

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,
  };
 }

 // 動態(tài)生成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;
 }

 // 動態(tài)生成控制按鈕
 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;
 }

 // 修改顯示的格子數(shù)
 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循環(huán)生成控制按鈕及柵格（未使用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 生成的每個柵格的樣式格式類似，只是長、寬比例區(qū)別，定義了方法（.video_panel(@count)），這是less的語法，極大的擴展了css功能，非常方便。

3. 關(guān)于TerminalMACS及本React Web管理端

3.1. TermainMACS

多終端資源管理與檢測系統(tǒng)（后續(xù)可能轉(zhuǎn)而寫成博客系統(tǒng)），包含多個子進(jìn)程模塊，目前開發(fā)了Xamarin.Forms客戶端、WPF管理端、React Web管理端、.NET Core WEB API服務(wù)端，下一步繼續(xù)完善WPF管理端（IdentityServer 4研究中）。

3.2. React Web管理端

作為TerminalMACS系統(tǒng)的一個子進(jìn)程模塊，目前使用 Ant Design Pro 搭建了框架，在平時工作中，添加一些測試Demo。

4. 關(guān)于項目開源開源項目地址：https://github.com/dotnet9/TerminalMACS

官方網(wǎng)站：https://dotnet9.com

總結(jié)

到此這篇關(guān)于使用React代碼動態(tài)生成柵格布局的方法的文章就介紹到這了,更多相關(guān)react 動態(tài)生成柵格布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: