以编程方式更改react-grid-layout中项目的高度/宽度

Question

有没有办法以编程方式更改项目布局的w和h？用例是有一个“折叠”按钮，它将高度降低到一个恒定的高度，足以留下物品的标题。为此，我最初的想法是将layouts保持在组件的状态，并手动将折叠项目的高度更改为另一个恒定高度。

然而，在初始渲染之后，图书馆似乎会忽略对layout的更改。是这种情况还是我的错误？如果这是正常的行为，还有另一种以编程方式改变高度的方法吗？

这是一个实现react-grid-layout的独立组件。这是两个“小部件”，它们有一个onClick处理程序来“折叠”它们。通过设置状态，它会触发重新渲染并重新计算布局，以便任何折叠项目的高度降低。控制台日志声明显示渲染的组件具有正确的新布局，但它不会反映在屏幕上，这使我相信还有另一个高度参考。

jsFiddle example

import React, { Component } from 'react';

import GridLayout, { WidthProvider } from 'react-grid-layout';
const Grid = WidthProvider(GridLayout);

// # WidgetsContainer
// Container WidgetsContainer component.
class WidgetsContainer extends Component {

    static defaultProps = {
        isDraggable: true,
        isResizable: true,
        rowHeight: 1,
        cols: 12,
    }

    constructor(props) {
        super(props);
        this.state = {
            layouts: [
                {
                    i: 'item_1',
                    x: 0,
                    y: 0,
                    w: 5,
                    h: 25,
                }, {
                    i: 'item_2',
                    x: 5,
                    y: 0,
                    w: 7,
                    h: 30,
                },
            ],
            collapsedWidgets: {},
        };
    }

    toggleWidget(id) {
        return () => {
            const newState = {...this.state.collapsedWidgets};
            const collapsed = typeof newState[id] === 'boolean' ? newState[id] : false;

            newState[id] = !collapsed;
            this.setState({
                collapsedWidgets: newState,
            });
        }

    }

    onResize(layouts) {
        this.setState({
            layouts,
        });
    }

    getModifiedLayouts() {
        const { layouts, collapsedWidgets } = this.state;

        const newLayouts = layouts.map(layout => {
            const newLayout = { ...layout };
            if (collapsedWidgets[newLayout.i]) {
                newLayout.h = 5;
            }
            return newLayout;
        });

        return newLayouts;
    }

    getWidgets() {
        const widgets = [{
            component: <div style={{ height: '250px', background: 'lightgray' }}>Content</div>,
            title: 'Item 1',
            id: 'item_1',
        }, {
            component: <div style={{ height: '310px', background: 'lightgray' }}>Content 2</div>,
            title: 'Item 2',
            id: 'item_2',
        }];
        return widgets;
    }

    generateDOM() {
        const widgets = this.getWidgets();

        const modifiedLayouts = this.getModifiedLayouts();

        return widgets.map((widget, i) => {
            return (<div key={i} _grid={modifiedLayouts[i]}>
                <div style={{ background: 'gray' }} onClick={::this.toggleWidget(widget.id)}>
                    {widget.title}
                    {widget.component}
                </div>
            </div>);
        });
    }

    render() {
        const widgets = this.generateDOM();
        console.log(widgets[0].props._grid)
        return (<div style={{ marginTop: '15px' }}>
                {widgets ? <Grid className="layout"
                  {...this.props}
                  onResizeStop={::this.onResize}
                >
                    {widgets}
                </Grid> : null}
            </div>);
    }
}

export default WidgetsContainer;

Answer 1

It turns out the trick is to not use the _grid and instead use the layout prop on the Grid component. Here is a working jsfiddle:

http://jsfiddle.net/zekedroid/d9o75d24/

And the code:

const Grid = ReactGridLayout.WidthProvider(ReactGridLayout);

class Logo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            layouts: [
                {
                    i: '0',
                    x: 0,
                    y: 0,
                    w: 5,
                    h: 25,
                }, {
                    i: '1',
                    x: 5,
                    y: 0,
                    w: 7,
                    h: 30,
                },
            ],
            collapsedWidgets: {},
        };
    }

    toggleWidget(id) {
        return () => {
            const newState = {...this.state.collapsedWidgets};
            const collapsed = typeof newState[id] === 'boolean' ? newState[id] : false;

            newState[id] = !collapsed;
            this.setState({
                collapsedWidgets: newState,
            });
        }

    }

    onResize(layouts) {
        this.setState({
            layouts,
        });
    }

    getModifiedLayouts() {
        const { layouts, collapsedWidgets } = this.state;

        const newLayouts = layouts.map(layout => {
            const newLayout = { ...layout };
            if (collapsedWidgets[newLayout.i]) {
                newLayout.h = 5;
            }
            return newLayout;
        });

        return newLayouts;
    }

    getWidgets() {
        const widgets = [{
            component: <div style={{ height: '250px', background: 'lightgray' }}>Content</div>,
            title: 'Item 1',
            id: '0',
        }, {
            component: <div style={{ height: '310px', background: 'lightgray' }}>Content 2</div>,
            title: 'Item 2',
            id: '1',
        }];
        return widgets;
    }

    generateDOM() {
        const widgets = this.getWidgets();

        return widgets.map((widget, i) => {
            return (<div key={i} style={{ overflowY: 'auto' }}>
                <div style={{ background: 'gray' }} onClick={this.toggleWidget(widget.id).bind(this)}>
                    {widget.title}
                    {widget.component}
                </div>
            </div>);
        });
    }

    render() {
        const widgets = this.generateDOM();

        const modifiedLayouts = this.getModifiedLayouts();

        return (<div style={{ marginTop: '15px' }}>
                {widgets ? <Grid className="layout"
                  {...this.props}
                  onResizeStop={this.onResize.bind(this)}
                  layout={modifiedLayouts}
                >
                    {widgets}
                </Grid> : null}
            </div>);
    }
}

Logo.defaultProps = {
        isDraggable: true,
        isResizable: true,
        rowHeight: 1,
        cols: 12,
    }



React.render( <Logo /> , document.getElementById('container'));