代码之家  ›  专栏  ›  技术社区  ›  mouchin777

除非我强制调整其大小,否则React网格布局不会用新元素正确更新

  •  0
  • mouchin777  · 技术社区  · 5 年前

    我所在州的布局如下

    layouts: {
                //x = starting from 0 horizontal position
                //y = starting from 0 vertical position
                //h = height of the el
                //minW = position relative to x width, from x(pos1) to x(pos2)
                lg: [
                    { i: 'a', x: 0, y: 0, w: 6, h: 6.45 },
                    // {i: 'b', x:6, y:0, w:6, h:6.45}
                ],
                md: [
                    { i: 'a', x: 0, y: 0, w: 5, h: 4.35 }
                    // {i: 'b', x:6, 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)
    
    
        }
        )
    }
    

    当我将元素推入布局状态时,它会被添加到一个不合适的位置,并且大小尽可能小。只有在我手动调整浏览器大小后,它才会正确对齐。

    请记住,如果我最初渲染添加的元素,它会在适当的位置渲染

    0 回复  |  直到 5 年前
        1
  •  2
  •   mouchin777    5 年前

    我有点用这个作为解决方法,但它真的很混乱,我不得不稍微改变一下应用程序的结构

    {this.state.addAppModal ? null : <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 >}
    

    基本上,我所做的是在用“null”更新整个responsegridlayout后重新遍历它,因为setstate显然没有正确更新它