這篇文章主要講解了使用React代碼動(dòng)態(tài)生成柵格布局的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)公司專注于南縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供南縣營銷型網(wǎng)站建設(shè)，南縣網(wǎng)站制作、南縣網(wǎng)頁設(shè)計(jì)、南縣網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造南縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供南縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

1. 最終效果

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

先看看效果

2. 代碼簡(jiǎn)單講解

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

 // 動(dòng)態(tài)生成Grid
 createCard() {
  var res = [];
  for (var i = 0; i < this.state.cardCount * this.state.cardCount; i++) {
   res.push();
  }
  return res;
 }

 // 動(dòng)態(tài)生成控制按鈕
 createControlButon() {
  var res = [];
  const btnCount = 4;
  for (let i = 1; i <= btnCount; i++) {
   res.push(
     {
      this.changeCardCount(i);
     }}
    >
     {i + '*' + i}
    ,
   );
  }

  return res;
 }

 // 修改顯示的格子數(shù)
 changeCardCount(count: any) {
  this.setState({
   cardCount: count,
  });
 }

 render() {
  return (
   

    

     

      

      

     
     

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

export default VideoPanel;

新聞名稱：使用React代碼動(dòng)態(tài)生成柵格布局的方法-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/dsosis.html