14

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

但是，似乎该库将忽略layout初始渲染后的更改。是这种情况还是我的错误？如果这是正常行为，是否有另一种以编程方式改变高度的方法？

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

jsFiddle 示例

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;
4

2 回答 2

7

事实证明，诀窍是不使用组件_grid，而是使用组件layout上的道具Grid。这是一个工作的jsfiddle：

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

和代码：

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'));
于 2016-03-04T18:16:58.263 回答
0

感谢@aepp 在 Github 上的阐述，这个解决方案工作得很好，我已经使用以下方法进行了测试react-grid-layout@1.3.0：

import React, {Component} from 'react';
import GridLayout from 'react-grid-layout';

...

//defining the layout inside the "state"
constructor(props) {
  super(props);

  this.state = {
    layout: [
      ...your_grid_items
    ],
  };
}

...

resizeGridItem = () => {
  const layout = this.state.layout.map(item => {...item});
  //here you can modify your layout, i.e.
  //layout[4].h = 4;
  ...

  this.setState({layout});
}

...

render() {
  return (
    <div>
      <GridLayout
        layout={this.state.layout}
        ...
      >
        ...
      </GridLayout>
      ...
      <button onClick={this.resizeGridItem}>Resize</button>
    </div>
  );
}
于 2021-12-26T20:32:03.230 回答