3

这是我用来生成 react-grid-layout 的代码。

我在这里想要实现的是一个动态仪表板，它是可配置的，也可以调整大小和拖动。

在初始渲染时，我试图让仪表板卡显示在一行中，因为所有四个仪表板卡的 Y 坐标都相同。请参考图片。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
//import { LayoutForm } from './layout-constant';
import { Responsive,WidthProvider} from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);
import GridLayout from 'react-grid-layout';
import {
  Row,
  Col,
  Card,
  CardHeader,
  CardBody,
  Progress
} from 'reactstrap';
import LineChart from './LineChart';
import ColumnChart from './ColumnChart';
import '6d-dynamic-dashboard/lib/styles/6d_dashboard.css';
import '../../node_modules/react-grid-layout/css/styles.css';
import '../../node_modules/react-resizable/css/styles.css';
const ReactHighcharts = require('react-highcharts');

class DynamicDashboard extends Component {
  constructor(props){
    super(props);
    this.state = {
      dispStyle : {}  
    }
    this.child = React.createRef();
    console.log("props",props);
  }

  renderMicroDash = () => {
      return(
        this.props.dashProps.microDash.map((dash) => {
          const className = dash.customWidth ? "pl-3" : dash.colProps;
          switch(dash.type){
            case 100 :
            return(
              <div style={{width : dash.customWidth}} className={className} key="a" 
              data-grid={{x: 0, y: 0, w: 3, h: 3.5, minW: 2, maxW: 4}}>
                <Card body className="mb-5 mt-4">
                  <Row>
                    <Col xl="8" lg="8" sm="8" xs="8" className="text-left">
                      <label>{dash.label}</label>
                      <h1 style={dash.textStyle}>{dash.sampleFigure}</h1>
                    </Col>
                    <Col xl="4" lg="4" sm="4" xs="4">
                      <i className={dash.icon}></i>
                    </Col>
                  </Row>
                </Card>
              </div>
            )
            case 101 :
            return(
              <div style={{width : dash.customWidth}} className={className} key="x" 
              data-grid={{x: 2, y:0, w: 3, h: 2, minW: 2, maxW: 4}}>
                <Card body className="mb-5 mt-4" style={dash.borderStyle}>
                  <Row>
                    <Col xl="12" lg="12" sm="12" xs="12" className="text-left">
                      <label>{dash.label}</label>
                      <h1 style={dash.textStyle}>{dash.sampleFigure}</h1>
                    </Col>
                  </Row>
                </Card>
              </div>
            )
            case 102 :
            return(
              <div style={{width : dash.customWidth}} className={className} key="c" 
              data-grid={{x: 4, y:0, w: 3, h: 2, minW: 2, maxW: 4}}>
                <Card body className="mb-5 mt-4">
                  <Row>
                  <Col xl="12" lg="12" sm="12" xs="12" className="text-left">
                      <label>{dash.label}</label>
                      {/* <h1 style={dash.textStyle}>{dash.sampleFigure}</h1> */}
                      <Progress animated value={75} color="success">$385</Progress>
                  </Col>
                  </Row>
                </Card>
              </div>
            )
            case 103 :
            return(
              <div style={{width : dash.customWidth}} className={className} key="g" 
              data-grid={{x: 6 , y:0, w: 3, h: 2, minW: 2}}>
                <Card body className="mb-5 mt-4" style={dash.cardStyle}>
                  <Row>
                    <Col xl="12" lg="12" sm="12" xs="12" className="text-left">
                      <label >{dash.label}</label>
                      <h1 style={dash.textStyle}>{dash.sampleFigure}</h1>
                      <span className="float-right">Overall Activity</span>
                    </Col>
                  </Row>
                </Card>
              </div>
            )
          }

        })
      )
  }
  render() {

      return (

      <div className="container col-md-12" >

          <ResponsiveGridLayout className="layout"
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} 
          rowHeight={30} width={1200}
          measureBeforeMount={true}>
                {this.renderMicroDash()}
          </ResponsiveGridLayout>  
      </div>);
    }
}
export default DynamicDashboard;

如您所见，所有四张卡片的初始 x 坐标不同，y 坐标为 0。因此，它们不是连续显示，而是如下所示： 初始渲染图像

拖放和调整大小工作得很好。

请帮助我了解我做错了什么或如何通过 React-grid-layout 解决我的卡片的初始随机放置。

4

1 回答 1

0

我知道这已经很老了，但以防万一其他人偶然发现，我们让 x 以 2 的步长增加，而项目的宽度为 3。尝试以超过宽度的步长增加 x，它应该没问题。因此，一组可能的 x 值可能是 0、4、8、12。

于 2021-10-20T06:23:58.280 回答