0

私は自分の状態で次のレイアウトを持っています

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 },

            ]
        }

この Respondgridlayout コンポーネントに読み込まれます

<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)


    }
    )
}

要素をレイアウトの状態にプッシュすると、不適切な位置に最小サイズで追加されます。そして、ブラウザのサイズを手動で変更した後にのみ、適切に配置されます。

追加された要素を最初にレンダリングすると、適切な位置にレンダリングされることに注意してください

4

1 に答える 1

1

これを回避策として使用しましたが、非常に面倒で、アプリの構造を少し変更する必要がありました

{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」で更新された後にレスポンシブグリッドレイアウト全体を再レンダリングすることです。

于 2020-04-20T07:07:26.197 に答える