javascript - 如何在 React Grid 布局中为 WidthProvider 赋予特定的宽度值

Question

我已经和这个斗争了太久了。如果取决于我的侧边栏是否隐藏，我需要能够更改网格的宽度。我只需要知道如何提供像素信息来更改大小。

这是我的代码：

import GridLayout,{ WidthProvider, Responsive } from "react-grid-layout";
import _ from "lodash";





const ResponsiveReactGridLayout = WidthProvider(Responsive);




class DashboardContainer extends React.PureComponent {
  static defaultProps = {
    className: "layout",
    //breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
    cols: { lg: 12, md: 10, sm: 5, xs: 4, xxs: 2 },
    width: 1000 - 160,
    rowHeight: 100,
    //verticalCompact: false
  };

  constructor(props) {
    super(props);
    console.log(props);
    console.log('responsive' + Responsive);
    

    this.state = {
      items: numWidgetsArray(this.props.numWidgets).map(function(i, key, list) {
        return {
          i: i.toString(),
          x: i * 2,
          y: 0,
          w: 2,
          h: 2,
          
          add: i === (list.length - 1)
        };
      }),
      newCounter: 0
    };

    this.onAddItem = this.onAddItem.bind(this);
    this.onBreakpointChange = this.onBreakpointChange.bind(this);
    this.onLayoutChange = this.onLayoutChange.bind(this);
  }
  //() => {this.onRemoveItem.bind(this, i);; this.props.setWidgetEvent('removeWidget'); this.props.saveNumWidgets(this.props.numWidgets - 1)}
  createElement(el) {
    const removeStyle = {
      position: "absolute",
      right: "2px",
      top: 0,
      cursor: "pointer"
    };
    const i = el.add ? el.i : el.i;
    return (
      <div key={i} data-grid={el}  style={{backgroundColor:'blue'}}>
        {/* {el.add ? (
          <span
            className="add text"
            onClick={this.onAddItem}
            title="You can add an item by clicking here, too."
          >
            Add +
          </span>
        ) : ( */}
          <span className="text"><WidgetTile/></span>
        {/* )} */}
        <span
          className="remove"
          style={removeStyle}
          onClick={() => {this.props.setSettingsOpen(!this.props.settingsOpen)}}
        >
          S
        </span>
      </div>
    );
  }

  onAddItem() {
    /*eslint no-console: 0*/
    console.log("adding", "n" + this.state.newCounter);
    this.setState({
      // Add a new item. It must have a unique key!
      items: this.state.items.concat({
        i: "n" + this.state.newCounter,
        x: (this.state.items.length * 2) % (this.state.cols || 12),
        y: Infinity, // puts it at the bottom
        w: 2,
        h: 2
      }),
      // Increment the counter to ensure key is always unique.
      newCounter: this.state.newCounter + 1
    });
  }

  // We're using the cols coming back from this to calculate where to add new items.
  onBreakpointChange(breakpoint, cols) {
    console.log('breakpoint: ' + breakpoint);
    console.log(cols);
    
    this.setState({
      breakpoint: breakpoint,
      cols: cols
    });
  }

  onLayoutChange(layout) {
    //this.props.onLayoutChange(layout);
    console.log(layout);
    this.setState({ layout: layout });
  }

  onRemoveItem(i) {
    console.log("removing", i);
    this.setState({ items: _.reject(this.state.items, { i: i }) });
  }

  componentDidUpdate(){
    if(this.props.widgetEvent === 'addWidget'){
        this.onAddItem();
        this.props.setWidgetEvent('');
    }
    else if(this.props.widgetEvent === 'removeWidget'){
        this.setState({items: numWidgetsArray(this.props.numWidgets).map(function(i, key, list) {
            return {
              i: i.toString(),
              x: i * 2,
              y: 0,
              w: 2,
              h: 2,
              add: i === (list.length - 1)
            };
          })})
        this.props.setWidgetEvent('');
    }
  }

  render() {
    return (
      
        <div>
          
          <ResponsiveReactGridLayout
            
            onLayoutChange={this.onLayoutChange}
            onBreakpointChange={this.onBreakpointChange}
            
            
            {...this.props}
          >
            {_.map(this.state.items, el => this.createElement(el))}
          </ResponsiveReactGridLayout>
          {this.props.settingsOpen ? <SettingsWindow/> : ''}
        </div>
      
    );
  }
}

export default DashboardContainer;

不管我看过什么，我都不明白如何让它工作。谢谢你。