Первоначальное расположение элементов сетки в разметке реагирования-сетки генерируется случайным образом.

Question

Вот код, который я использую для создания ответной сетки.

Здесь я пытаюсь добиться динамической панели инструментов, которую можно настраивать, а также изменять и перетаскивать.

При первоначальном рендеринге я пытаюсь, чтобы карточки приборной панели отображались в один ряд, поскольку 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. Поэтому вместо отображения в строке они отображаются, как показано ниже: Initial Render Image

Перетаскивание и изменение размера работает абсолютно нормально.

Пожалуйста, помогите мне понять, что я делаю неправильно или как решить это начальное случайное размещение моих карт с помощью React-grid-layout.

Answer 1

Я знаю, что это довольно давно, но на тот случай, если кто-то еще наткнется на это, у нас x увеличивается с шагом 2, а ширина элементов равна 3. Попробуйте увеличивать x с шагом больше, чем ширина, и все должно быть в порядке. Таким образом, один из возможных наборов значений x может быть 0, 4, 8, 12.