2

我遇到了库 react-grid-layout 的问题，我不知道这是一个错误还是我做的不好。我在这里打开了一个问题，但我想得越多，这么大的问题被忽视的可能性就越小。你可以在这里找到我正在经历的演示

我正在尝试做的事情

我想使用 react-grid-layout 创建一个仪表板。我正在尝试实现 容器模式，因此我有一个 DashboardContainer 组件通过他的状态控制布局并将此布局传递给道具中的 Dashboard 组件。

我遇到的问题

元素在初始状态下被正确放置，但是当我添加项目时，添加元素的 x、y、w 和 h 不正确。第一次添加应该是 (5,0,2,2)，它最终被放置在 (0,4,1,1) 上没有正确的钥匙，但我认为我的钥匙是正确的。

示例：此布局传递给 Dashboard 布局数据

但这是显示布局（元素“new0”不对应） 显示布局

我的代码

这是我的 DashboardContainer 组件的（简化）代码

import React from "react";
import ReactDOM from "react-dom";
import Dashboard from "./Dashboard";

class DashboardContainer extends React.Component {
  static defaultProps = {
    maxRows: 8,
    cols: 12
  };

  state = {
    layout: [
      { i: "key0", x: 0, y: 0, w: 2, h: 2 },
      { i: "key1", x: 2, y: 0, w: 3, h: 2 },
      { i: "key2", x: 2, y: 2, w: 2, h: 2 },
      { i: "key3", x: 8, y: 0, w: 3, h: 2 }
    ],
    newElementsCount: 0
  };

  onLayoutChange = l => {
    this.setState({ layout: l });
  };

  add = () => {
    // here we calculate where the new element should be placed
    var x = foundX, y = foundY, w = foundW, h = foundH;
    var newLayout = this.state.layout;

    newLayout.push({
      i: "new" + this.state.newElementsCount,
      x: x,
      y: y,
      w: w,
      h: h
    });

    this.setState({
      newElementsCount: this.state.newElementsCount + 1,
      layout: newLayout
    });
  };

  render() {
    return (
      <div>
        <Dashboard
          layout={this.state.layout}
          add={this.add}
          cols={this.props.cols}
          maxRows={this.props.maxRows}
          onLayoutChange={this.onLayoutChange}
          preventCollision={true}
        />
      </div>
    );
  }
}

const contentDiv = document.getElementById("root");
ReactDOM.render(React.createElement(DashboardContainer), contentDiv);

这里是仪表板组件：

import React from "react";
import RGL, { WidthProvider } from "react-grid-layout";
const ReactGridLayout = WidthProvider(RGL);

class Dashboard extends React.Component {
  generateDOM() {
    return this.props.layout.map(function(item) {
      return <div key={item.i}>{item.i}</div>;
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.props.add}>Add</button>
        <ReactGridLayout
          rowHeight={30}
          maxRows={this.props.maxRows}
          cols={this.props.cols}
          layout={this.props.layout}
          compactType={null}
          onLayoutChange={this.props.onLayoutChange}
        >
          {this.generateDOM()}
        </ReactGridLayout>
      </div>
    );
  }
}

module.exports = Dashboard;

完整（几乎）工作代码可以在这个代码框中找到

我对 React 和 RGL 还是很陌生，所以欢迎提出任何建议！

谢谢

4

0 回答 0