antd + react-grid-layout 所见即所得

最新推荐文章于 2024-08-22 08:31:51 发布
最新推荐文章于 2024-08-22 08:31:51 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： 前端学习 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longmushasha/article/details/109847927
版权

先安装 react-grid-layout
npm install react-grid-layout

首先从服务器去拿数据，是否有保存的面板方案，如果没有就使用默认面板（可以自己保存默认面板方案），默认面板方案也是从服务器获取,取到数据之后渲染
我没有把单个面板写活，只是暂时对每个面板定了一个唯一的i

i----是指面板的名称
h—是面板的高度
w—是面板的宽度
x—是面板的坐标 x轴
y—是面板的坐标 y轴
这些是react-grid-layout渲染所需要的值

第一步：取数据–保存到state中的widgets 中

 //从服务器获取所有面板列表
  getFromService = () => {
    const { dispatch, user } = this.props;
    const { widgets } = this.state;
    if (user.currentUser.username)
      dispatch({
        type: "dragShow/findPritOverViewLayoutByPublic",
        payload: {
          "pageNum": 1,//页码  必填
          "pageSize": 20,//数量  必填
          "owner": user//所属人（新建入）  非必填
        },
        callback: res => {
          if (res && res.resultCode === 200 && res.data) {
            this.setState({ modeList: res.data.list }, () => {
              this.setDefaultModel();
            });
          }
        }
      })
  }
  //获取默认模板，并渲染
  setDefaultModel = () => {
    const { modeList } = this.state;
    if (modeList.length === 1) {
      //只有一条数据，是默认公共模板，公共模板不可删除
      this.changeModeList(modeList[0].layoutId);
    } else if (modeList.length > 1) {
      const defaultModel = modeList.find(item => item.isDefault === 1);
      defaultModel ?
        this.changeModeList(defaultModel.layoutId) :
        this.changeModeList(modeList[0].layoutId);
    }
  }
  //选择方案模型列表中的一个，赋值到react-grid-layout渲染所需要的值
  changeModeList = (value) => {
    const { modeList } = this.state;
    const {
      form: { setFieldsValue }
    } = this.props;
    const current = modeList.find(item => item.layoutId === value);
    // 面板
    const currentArr = [];
    const iscurShowArr = [];
    if (current && current.contentJson) {
      current.contentJson.map(item => {
        let obj = {};
        obj.i = item.widgetId;
        obj.h = Number(item.height);
        obj.w = Number(item.width);
        obj.x = Number(item.xaxis);
        obj.y = Number(item.yaxis);
        iscurShowArr.push(item.widgetId.split('-')[1]);
        currentArr.push(obj);
      })
      setFieldsValue({ modelName: current.name })
      setFieldsValue({ modellist: current.layoutId })
      this.setState({ widgets: currentArr, isShowArr: iscurShowArr, editLayoutId: current.layoutId })
    }
  }

第二步：渲染

引入
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);
//需要引入css 不然 缩放的那个小图标出不来，还有一些其他问题
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'

  //需要注意 面板发生变化的时候，需要实时保存数据到widgets中
  onLayoutChange = (current, layouts) => {
    // console.log(current);
    let EUlayoutArr = [];
    var index = -1;
    current.forEach(({ i, x, y, w, h }) => {
      index++;
      EUlayoutArr[index] = { i, x, y, w, h };
    })
    this.setState({ widgets: EUlayoutArr });
  }
  //---渲染
  setPanelShow = () => {
    const { widgets, obj } = this.state;
    return _.map(widgets, (l, i) => {
      let component = obj[l.i.split("-")[1]];
      return (
        <div className='drag' key={l.i} data-grid={l} style={{ background: '#222A39' }}>
          <div className="deleteTag" onClick={() => this.onRemoveItem(l.i)}>×</div>
          <div className="dragcontent">
            {component}
          </div>
        </div>
      )
    })
  }
  
//render里面的代码
              {/* 交易员和基金经理区分模块显示 */}
              <ResponsiveGridLayout className="layout" layouts={{ lg: widgets }} rowHeight={30}
                breakpoints={{ lg: 768, md: 768, sm: 768, xs: 768, xxs: 0 }}
                cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }}
                isResizable={true} //设置可缩放
                onLayoutChange={(layout, layouts) => this.onLayoutChange(layout, layouts)}
                margin={[10, 10]}
                isDraggable={true} //设置可拖动
                measureBeforeMount={false}
                useCSSTransforms={true}
                // onBreakpointChange={this.onBreakpointChange}
                preventCollision={!this.state.compactType}
              >
                {this.setPanelShow()}
              </ResponsiveGridLayout>

左侧是一栏放小面板的管理列， 点击可以添加到右侧的容器里，右侧容器可以拖拽缩放
左侧点击添加的代码（判断数组是否有这个面板，如果没有则不显示，写法较挫）：


  //左侧显示面板-----方法
  isShowComponent = (mode, type) => {
    const { isShowArr, obj } = this.state;
    return (isShowArr.find(item => item === type) ? "" : <div className="leftItem" onClick={() => this.addMoudle(mode, type)}>{obj[type]}</div>)
  }
//----render里面的代码
          <Col span={4} style={{ paddingRight: 10 }}>
            <div className="leftbox" >
              {this.isShowComponent('tz', 'portfolioTable')}
              {this.isShowComponent('tz', 'trendChart')}
              {this.isShowComponent('tz', 'redemptionChart')}
              {this.isShowComponent('tz', 'keyChart')}
              {this.isShowComponent('tz', 'mainCard')}
              {this.isShowComponent('tz', 'tradeTodayChart')}
              {this.isShowComponent('tz', 'noticeTable')}
              {this.isShowComponent('tz', 'assetsChart')}
            </div>
          </Col>

搞懂了渲染机制，那么保存和删除就容易很多了，
全部代码：


import React, { Component } from 'react';
import { connect } from 'dva';
import { Responsive, WidthProvider } from 'react-grid-layout';
import _ from "lodash";
//单个面板，我这有8个面板
import PortfolioTable from './component/portfolioTable'
import NoticeTable from './component/noticeTable'

import TrendChart from './component/trendChart'
import RedemptionChart from './component/redemptionChart'
import KeyChart from './component/keyChart'
import TradeTodayChart from './component/tradeTodayChart'
import AssetsChart from './component/assetsChart'

import MainCard from './component/mainCard'

import { Row, Col, Form, Button, Input, message, Select, Popconfirm, Checkbox } from 'antd';

import styles from './index.less'
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'

const { Option } = Select;

const ResponsiveGridLayout = WidthProvider(Responsive);

@connect(({ user }) => ({ user }))
@Form.create()
class DragShow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEUorCP: 'CP',
      newConters: 0,
      compactType: "vertical",
      // layouts: { lg: props.initialLayout },
      // layouts: this.getFromLS('layouts'),
      widgets: [],
      obj: {
        "portfolioTable": <PortfolioTable />,
        "noticeTable": <NoticeTable />,
        "trendChart": <TrendChart />,
        "redemptionChart": <RedemptionChart />,
        "keyChart": <KeyChart />,
        "mainCard": <MainCard />,
        "tradeTodayChart": <TradeTodayChart />,
        "assetsChart": <AssetsChart />
      },
      isShowArr: [],
      modeList: [],
      editLayoutId: "",
    }
  }

  UNSAFE_componentWillMount() {

  };

  componentWillUnmount() {
    // componentWillMount进行异步操作时且在callback中进行了setState操作时，需要在组件卸载时清除state
    this.setState = () => {
      return;
    };
  }

  componentDidMount() {
    const { user: userMc } = this.props;
    //获取方案模板列表
    if (userMc) {
      this.getFromLS()
    }
  }

  componentDidUpdate(prevProps) {
    const { user: userMc } = this.props;
    const { user } = prevProps;
    if (user !== userMc) {
      this.getFromLS()
    }
  }

  //从服务器获取所有面板列表
  getFromService = () => {
    const { dispatch, user } = this.props;
    const { widgets } = this.state;
    if (user.currentUser.username)
      dispatch({
        type: "dragShow/findPritOverViewLayoutByPublic",
        payload: {
          "pageNum": 1,//页码  必填
          "pageSize": 20,//数量  必填
          // "name":"string",//面板名称    非必填
          "owner": user.currentUser.username//所属人（新建入）  非必填
        },
        callback: res => {
          if (res && res.resultCode === 200 && res.data) {
            this.setState({ modeList: res.data.list }, () => {
              this.setDefaultModel();
            });

          }
        }
      })
  }

  //存储拖拽移动的位置到缓存
  onLayoutChange = (current, layouts) => {
    // console.log(current);
    let EUlayoutArr = [];
    var index = -1;
    current.forEach(({ i, x, y, w, h }) => {
      index++;
      EUlayoutArr[index] = { i, x, y, w, h };
    })
    this.setState({ widgets: EUlayoutArr });
  }

  //获取默认模板，并渲染
  setDefaultModel = () => {
    const { modeList } = this.state;
    if (modeList.length === 1) {
      //只有一条数据，是默认公共模板，公共模板不可删除
      this.changeModeList(modeList[0].layoutId);
      // setFieldsValue({modellist:modeList[0].layoutId})
    } else if (modeList.length > 1) {
      const defaultModel = modeList.find(item => item.isDefault === 1);
      defaultModel ?
        this.changeModeList(defaultModel.layoutId) :
        this.changeModeList(modeList[0].layoutId);
    }
  }

  // 删除项目
  onRemoveItem(i) {
    //i  项目-面板
    const { widgets, isShowArr } = this.state;
    this.setState({
      //面板过滤掉 删除项目，以及左侧内容过滤
      widgets: widgets.filter(item => item.i !== i), isShowArr: isShowArr.filter(item => { return item !== i.split('-')[1] })
    })
    localStorage.setItem('layouts', JSON.stringify(widgets))
  }


  //添加单个面板
  addMoudle = (mode, type) => {
    const { newConters, widgets, isShowArr } = this.state;
    const addItem = {
      i: `${mode}-${type}`,
      x: 0,
      y: 0,
      w: 6,
      h: 8,
    }
    isShowArr.push(type)
    widgets.push(addItem)
    this.setState({
      widgets, newConters: newConters + 1, isShowArr: [...new Set(isShowArr)]
    })
  }

  //初始化时，加载左侧面板
  setPanelShow = () => {
    const { widgets, obj } = this.state;
    return _.map(widgets, (l, i) => {
      let component = obj[l.i.split("-")[1]];
      return (
        <div className='drag' key={l.i} data-grid={l} style={{ background: '#222A39' }}>
          <div className="deleteTag" onClick={() => this.onRemoveItem(l.i)}>×</div>
          <div className="dragcontent">
            {component}
          </div>
        </div>
      )
    })
  }

  //左侧显示面板
  isShowComponent = (mode, type) => {
    const { isShowArr, obj } = this.state;
    return (isShowArr.find(item => item === type) ? "" : <div className="leftItem" onClick={() => this.addMoudle(mode, type)}>{obj[type]}</div>)
  }

  // 输入方案模型名称
  onChangeModelName = (value) => {
  }

  //保存方案模板
  onSave = () => {
    const { dispatch, user, form: { getFieldValue } } = this.props;
    const { widgets, editLayoutId, modeList,isdefalutCheck } = this.state;
    if (!getFieldValue("modelName")) {
      message.error("请先输入面板名称");
      return false;
    }
    if (modeList.find(item => item.name === getFieldValue("modelName")) && editLayoutId === "") {
      message.error("该面板已存在，请修改面板名称");
      return false;
    }
    const currentModel = modeList.find(item => item.layoutId === editLayoutId);
    if (currentModel && currentModel.layoutShortCode === "public") {
      message.error('不能修改公共默认模板，请知悉')
      return false;
    }
    const contentJson = [];
    widgets.map(item => {
      const obj = {};
      obj.widgetId = item.i;
      obj.height = item.h;
      obj.width = item.w;
      obj.xaxis = item.x;
      obj.yaxis = item.y;
      contentJson.push(obj);
    })
    let payload = {
      "contentJson": contentJson,
      "owner": user.currentUser.username,
      "name": getFieldValue("modelName"),
      "layoutId": editLayoutId,
      "isDefault":isdefalutCheck?1:0
    }
    const typeurl = editLayoutId ? "dragShow/editPritOverViewLayout" : "dragShow/addPritOverViewLayout";
    dispatch({
      type: typeurl,
      payload: payload,
      callback: res => {
        if (res && res.resultCode === 200) {
          message.success(res.resultMsg)
        } else {
          message.error(res.resultMsg)
        }
      }
    })
  }

  //重置
  onReset = () => {
    const { form: { setFieldsValue } } = this.props;
    setFieldsValue({ modelName: "",modellist:"" });
    this.setState({ editLayoutId: "",isdefalutCheck:false });
  }

  //选择方案模型列表中的一个，渲染
  changeModeList = (value) => {
    const { modeList } = this.state;
    const {
      form: { setFieldsValue }
    } = this.props;
    const current = modeList.find(item => item.layoutId === value);
    // 面板
    const currentArr = [];
    const iscurShowArr = [];
    if (current && current.contentJson) {
      current.contentJson.map(item => {
        let obj = {};
        obj.i = item.widgetId;
        obj.h = Number(item.height);
        obj.w = Number(item.width);
        obj.x = Number(item.xaxis);
        obj.y = Number(item.yaxis);
        iscurShowArr.push(item.widgetId.split('-')[1]);
        currentArr.push(obj);
      })
      setFieldsValue({ modelName: current.name })
      setFieldsValue({ modellist: current.layoutId })
      this.setState({ widgets: currentArr, isShowArr: iscurShowArr, editLayoutId: current.layoutId })
    }
  }

  //删除一个模板
  delPritOverViewLayout = () => {
    const { dispatch, user } = this.props;
    const { editLayoutId, modeList } = this.state;
    const currentModel = modeList.find(item => item.layoutId === editLayoutId);
    if (currentModel && currentModel.layoutShortCode === "public") {
      message.error('不能删除公共默认模板，请知悉')
      return false;
    }
    if (user.currentUser.username) {
      dispatch({
        type: "dragShow/delPritOverViewLayout",
        payload: {
          "layoutId": editLayoutId,
          "owner": user.currentUser.username//所属人（新建入）  非必填
        },
        callback: res => {
          if (res && res.resultCode === 200) {
            message.success(res.resultMsg)
            this.setDefaultModel();
          } else {
            message.error(res.resultMsg)
          }
        }
      })
    }
  }

  //选中或者不选中是否为默认
  onChangeCheck = (e) => {
    this.setState({isdefalutCheck:e.target.checked})
  }

  render() {
    const { widgets, modeList, editLayoutId ,isdefalutCheck} = this.state;
    const {
      form: { getFieldDecorator }
    } = this.props;
    const options = modeList.map(item => <Option key={item.layoutId}>{item.name}</Option>)
    return (
      <div style={{ margin: 20 }} className={styles.dragShow}>
        <div className="tablebg" style={{ padding: 10, marginBottom: 10 }}>
          <div className="search-box">
            <Form layout="inline">
              <Form.Item label='面板列表'>
                {getFieldDecorator(`modellist`)(<Select style={{ width: '120px' }} onChange={this.changeModeList} >{options}</Select>)}
              </Form.Item>
              <Form.Item label='面板名称'>
                {getFieldDecorator(`modelName`)(<Input disabled={editLayoutId !== ""} style={{ width: '120px' }} onChange={this.onChangeModelName} />)}
              </Form.Item>
              <Checkbox checked = {isdefalutCheck} onChange={this.onChangeCheck}>设为默认面板</Checkbox>
              <Button style={{ marginTop: '3px', marginRight: 10 }} type='dashed' onClick={this.onSave}>保存</Button>
              <Button style={{ marginTop: '3px', marginRight: 10 }} className="greyButton" onClick={this.onReset}>重置</Button>
              {/* <Button style={{ marginTop: '3px', marginRight: 10 }} className='buleButton' onClick={this.onSave}>设为默认</Button> */}
              <Popconfirm title="确定删除该项吗？" onConfirm={() => this.delPritOverViewLayout()}>
                <Button style={{ marginTop: '3px', marginRight: 10 }} className="greyButton" >删除</Button>
              </Popconfirm>
            </Form>
          </div>
        </div>
        <Row>
          <Col span={4} style={{ paddingRight: 10 }}>
            <div className="leftbox" >
              {this.isShowComponent('tz', 'portfolioTable')}
              {this.isShowComponent('tz', 'trendChart')}
              {this.isShowComponent('tz', 'redemptionChart')}
              {this.isShowComponent('tz', 'keyChart')}
              {this.isShowComponent('tz', 'mainCard')}
              {this.isShowComponent('tz', 'tradeTodayChart')}
              {this.isShowComponent('tz', 'noticeTable')}
              {this.isShowComponent('tz', 'assetsChart')}
            </div>
          </Col>
          <Col span={20} style={{ paddingLeft: 10 }}>
            <div className="rightbox" >
              {/* 交易员和基金经理区分模块显示 */}
              <ResponsiveGridLayout className="layout" layouts={{ lg: widgets }} rowHeight={30}
                breakpoints={{ lg: 768, md: 768, sm: 768, xs: 768, xxs: 0 }}
                cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }}
                isResizable={true}
                onLayoutChange={(layout, layouts) => this.onLayoutChange(layout, layouts)}
                margin={[10, 10]}
                isDraggable={true}
                measureBeforeMount={false}
                useCSSTransforms={true}
                // onBreakpointChange={this.onBreakpointChange}
                preventCollision={!this.state.compactType}
              >
                {this.setPanelShow()}
              </ResponsiveGridLayout>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

export default DragShow;
买个床
关注
专栏目录
react-froala-wysiwyg, Froala所见即所得HTML富文本编辑器的反应组件.zip
09-17
react-froala-wysiwyg, Froala所见即所得HTML富文本编辑器的反应组件 反应 JS Froala所见即所得编辑器 react-froala-wyswiyg为 Froala WYSIWYG编辑器版本 2提供了响应绑定。安装npm install react-froala-wysiwyg --
先进的React GUI编辑器 — Structor，所见即所得！
weixin_30587927的博客
09-04 358
先进的React GUI编辑器 — Structor https://helmetrex.com/ 手把手教你基于 ES6 架构自己的 React Boilerplate 项目 http://www.open-open.com/lib/view/open1462013660085.html http://jiji262.github.io/awesome-...
React Grid Layout 开源项目教程
最新发布
gitblog_00840的博客
08-22 398
React Grid Layout 开源项目教程 react-grid-layout项目地址:https://gitcode.com/gh_mirrors/rea/react-grid-layout 1. 项目的目录结构及介绍 React Grid Layout 是一个用于构建可拖拽和可调整大小的网格布局的 React 组件。以下是其主要目录结构及其介绍： react-grid-layout/ ...
react-designer, 所见即所得编辑器可以设计反应性文档.zip
09-18
react-designer, 所见即所得编辑器可以设计反应性文档 设计器反应设计师的所见即所得编辑器，可以轻松创建内容创建 ( 法律合同，商业形式，营销传单，inforgrafics，技术指南，可视化报告，丰富的仪表板，教程和其他内容，等等 ) 。然而，我必须反复强调它仍然是一个Prototype并且
react-grid-layout
weixin_30247159的博客
11-12 2990
一个好用的拖拽、自适应布局 react 插件 基本使用： // 显示全部 chart 内容区域 import React,{PureComponent} from 'react'; import {Responsive, WidthProvider } from "react-grid-layout"; const ReactGridLayout = WidthProvider(...
react-grid-layout 移动后排序新数组
FrozenNoodle的博客
07-17 453
importGridLayoutfrom'react-grid-layout'; importReactfrom'react'; import'./index.css'; functioncompare(property){ returnfunction(a,b){ varvalue1=a[property]; varvalue2=b[property]; returnvalue1-value2; } } c...
ts-redux-toolkit:TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router
04-04
ts-react-redux-toolkit TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router 还原 执照 新的BSD许可证
react-antd-admin：react + antd + react-router4 + saga + es6es7
01-31
react-antd-admin（新版后台很快就与大家见面了） 最新更新 react版本升级到16，webpack版本升级4，babel升级到7，antd升级到3，同时yarn缓存下载的每个包以及happypack利用了多进程，同时还利用了缓存来重新构建...
react前端框架，react +antd+react-router+less
06-24
React核心框架： React是一个用于构建用户界面的JavaScript库，它采用声明式编程范式，使代码更加简洁、可预测且易于测试。 React的组件化开发模式允许我们将复杂的界面拆分成多个可复用的组件，提高了代码的可维护...
react-antd-demo:学习react+react-router +antd 搭环境
04-30
git clone :modanzuo/react-antd-demo.git #框架用到的库 antd react react-app-rewired react-router react-router-dom fetch #运行 安装库 npm install #本地开发 yarn yarn run start npm npm run start ...
react-antd-multi-tabs-admin:ts+react+antd-多页签后台模板(纯净版，非 antd pro！)
05-06
:rocket:: 流行技术：使用 React/Redux/Antd 等前端前沿技术开发 :artist_palette:: 主题样式：使用流行的暗黑模式主题，支持深/浅色主题切换 特点 多 tab 页签:plus:右键菜单，提升效率 Redux 状态管理:plus:持久化...
IEManageSystem:基于Asp.net core + React + ReactNative的可视化编辑，所见即所得的CMS，具有浏览器和App两个前端
03-11
IE管理系统 CMS介绍 可视化页面编辑 IEManageSystem是一个CMS管理系统，完成前扩展分离，通过组件堆积生成页面，你可以更改任何你想更改的地方 IEManageSystem目前有Web端和安卓App端（是的App，不是浏览器），为了方便用户编辑，IEManageSystem允许在浏览器对App进行编辑 由于个人开发的原因，目前提供的组件并不多，后续会提供更多组件 目前项目还属于开发阶段，bug什么的一定会有的 相对于其他CMS的优点 具有Web端和安卓App端，后面会集成苹果App端 页面编辑灵活，想编辑哪里就编辑哪里，后面考虑增加拖拽功能 组件具有灵活的配置和数据，包括图表等需要复杂的配置和数据，IEManageSystem都可以完成，添加图表展示只不过是点击页面而已 IEManageSystem允许每个组件都有自己的替换逻辑，重组逻辑会在服务器进行动态编译，完成一个业务
react-page：浏览器的下一代，高度可定制的内容编辑器-基于React和Redux，并以TypeScript编写。 所见即所得的类固醇
02-05
ReactPage ReactPage是使用React编写的Web的智能，可扩展且现代的编辑器（“ WYSIWYG”）。 如果您受够了contenteditable的限制，那么您来对地方了。 安装 yarn add @react-page/editor 要么 npm install --save @react-page/editor 还有一个next发行渠道，其中可能包含不稳定的功能： yarn add @react-page/editor@next 要么 npm install --save @react-page/editor@next 演示版 可以在上找到一个，该反映了npm
grid-layout 网格布局--快速上手
weixin_30781775的博客
08-19 422
grid布局非常强大，他是二维布局模式，将容器划分成“行”和“列”，产生单元格，然后指定项目所在单元格，，而flex是一维布局，grid远比flex强大的多。 这里我只讲日常工作中常用的属性。 1、容器上的属性 （1）display属性 display：grid 用来指定容器为网格布局。这跟我们以前写display：block；display：flex；都是一个意思，就是告...
Grid layout入门
justforuse的博客
08-06 1163
一个不错的入门视频：youtube
自定义 GridLayout 实现可拖拽的 GridView
baymaxjie的博客
09-07 1860
在项目中，如果有单独的一页来展示分类功能，经常会有一些交互的操作，比如动态的添加新的分类、长按拖拽某一个条目来调整位置等。 看效果先：
在react项目中引入antd
宫崎骏爷爷的捣蛋野孩子
10-08 6459
在react项目中引入antd 一、antd官网地址 https://ant.design/docs/react/introduce 二、引进antd（直接引入） 1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2、在react项目的css文件中引入 Antd的css @import 'antd/dist/antd.css'; 3、看文档使用： 如使用Button： 1、在对应
React-grid-layout的使用
weixin_48845614的博客
08-31 3421
简介 React-grid-layout 是一个网格布局系统，可以实现响应式的网格布局，灵活运用可以方便的实现拖拽式组件的实现 用法 基本用法 import GridLayout from 'react-grid-layout'; class MyFirstGrid extends React.Component { render() { // layout is an array of objects, see the demo for more complete usage con
React中页面的收缩和展开效果
热门推荐
只如初见0706的博客
01-15 1万+
1、实现效果单击当前页面中指定按钮，实现右侧页面的展开和收缩效果具体效果如下2、左右采用栅格化布局:不了解的小伙伴请参考：https://ant.design/components/grid-cn/3、左右页面栅格化占比通过状态机state实现，初始化设置：左侧页面的栅格化占比为24，右侧页面为0（即达到左侧页面全屏，右侧页面不显示的效果），代码如下 //状态机设置 constructor() {...
antd-mobild+react-router-dom实现 tabs
07-13
你可以使用antd-mobile和react-router-dom来实现tabs功能。首先，你需要安装antd-mobile和react-router-dom依赖包。 ```shell npm install antd-mobile react-router-dom ``` 接下来，你可以创建一个Tabs组件，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值