gpt4 book ai didi

javascript - react-grid-layout 中 grid-items 的初始定位是随机生成的

转载 作者:行者123 更新时间:2023-12-05 07:31:31 26 4
gpt4 key购买 nike

这是我用来生成 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。因此,它们不是连续显示,而是显示如下: Initial Render Image

拖放和调整大小工作绝对正常。

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

最佳答案

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

关于javascript - react-grid-layout 中 grid-items 的初始定位是随机生成的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51744907/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com