我所在州的布局如下
layouts: {
lg: [
{ i: 'a', x: 0, y: 0, w: 6, h: 6.45 },
],
md: [
{ i: 'a', x: 0, y: 0, w: 5, h: 4.35 }
],
sm: [
{ i: 'a', x: 0, y: 0, w: 1, h: 2 },
],
xs: [
{ i: 'a', x: 0, y: 0, w: 1, h: 2 },
],
xxs: [
{ i: 'a', x: 0, y: 0, w: 1, h: 2 },
]
}
加载到此响应式布局组件中
<ResponsiveGridLayout className="layout"
layouts={this.state.layouts}
margin={[0, 0]}
breakpoints={{ lg: 1300, md: 1000, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}>
{_.map(this.state.layouts.lg, el => this.createElement(el))}
</ResponsiveGridLayout >
它工作得很好,但每当我想在这个函数的布局中添加新元素时
closeAddModal = (el) => {
console.log(el.target.getAttribute('name'))
this.setState({
addAppModal: false
})
var layouts = this.state.layouts;
layouts.lg.push({ i: 'b', x: 6, y: 0, w: 6, h: 6.45 })
// layouts.md.push({i: 'b', x:6, y:0, w:5, h:4.35})
this.setState({
layouts: layouts
}, () => {
console.log(this.state.layouts)
}
)
}
当我将元素推入布局状态时,它会被添加到一个不合适的位置,并且大小尽可能小。只有在我手动调整浏览器大小后,它才会正确对齐。
请记住,如果我最初渲染添加的元素,它会在适当的位置渲染