在使用 react-grid-layout 示例时遇到问题

Question

当我遇到一些障碍时，一直在尝试做出反应并查看反应网格布局。我基本上按原样粘贴了 here 中的示例，但由于某种原因，当我拖动一个元素时，它没有粘住。我在控制台中遇到的错误是：

Uncaught TypeError: this.props.onLayoutChange is not a function

我确定这是我遗漏的一个简单的事情，但这是我的第一个 React 项目，我希望得到一些指导。

我的代码如下：

    'use strict';
    var React = require('react');
    var _ = require('lodash');
    var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;

    /**
     * This layout demonstrates how to use a grid with a dynamic number of     elements.
     */
    var AddRemoveLayout = React.createClass({
    getDefaultProps() {
      return {
        className: "layout",
        cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
        rowHeight: 100
      };
    },

    getInitialState() {
      return {
        items: [0, 1, 2, 3, 4].map(function(i, key, list) {
          return {i: i, x: i * 2, y: 0, w: 2, h: 2, add: i === list.length -    1};
       }),
      newCounter: 0
      };
    },

    createElement(el) {
      var removeStyle = {
        position: 'absolute',
        right: '2px',
        top: 0,
        cursor: 'pointer'
      };
      var i = el.add ? '+' : el.i;
      return (
        <div key={i} _grid={el}>
          {el.add ?
            <span className="add text" onClick={this.onAddItem} title="You can add an item by clicking here, too.">Add +</span>
          : <span className="text">{i}</span>}
        <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
      </div>
    );
    },

    onAddItem() {
      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) {
    this.setState({
      breakpoint: breakpoint,
      cols: cols
    });
  },

  onLayoutChange(layout) {
    this.props.onLayoutChange(layout);
    this.setState({layout: layout});
  },

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

  render() {
    return (
      <div>
        <button onClick={this.onAddItem}>Add Item</button>
        <ResponsiveReactGridLayout onLayoutChange={this.onLayoutChange} onBreakpointChange={this.onBreakpointChange}
            {...this.props}>
          {_.map(this.state.items, this.createElement)}
        </ResponsiveReactGridLayout>
      </div>
    );
  }
});

module.exports = AddRemoveLayout;


React.render(<AddRemoveLayout/>, document.getElementById('app'))

Answer 1

您收到的错误是关于缺少道具的错误。在 React 组件中，你基本上有 2 个地方来保存你的数据，在它的 parent 和你的组件本身。你的 parent 在声明它时经常有道具，因为这些是你传递给 child 的属性（就像 HTML 标签中的属性）。然后我们有状态，它是组件本身内部的数据。

您收到的错误是说我们没有从我们的 parent 中获得必需的道具（您还可以看到在 onLayoutChange(layout) 函数中正在调用this.props.onLayoutChange(layout) 方法).

所以基本上我们缺少一些道具。在 GitHub 的示例中，有一个名为 test-hook.jsx (https://github.com/STRML/react-grid-layout/blob/master/test/test-hook.jsx) 的根文件。此根节点有一个 child（您试图直接呈现的代码），它在其中将所需的函数作为属性.

传递

您可以使用 test-hook.jsx，也可以编写自己的根节点，该节点具有布局状态和更新该状态所需的函数（参见 github 示例怎么做）。

Answer 2

所以经过一番搜索，我发现该示例将 onLayoutChange 函数指定为占位符。如果我想要一个自定义函数，我需要定义它。

只需完全删除此功能并使用默认设置即可解决问题。

删除这个：

onLayoutChange(layout) {
  this.props.onLayoutChange(layout);
  this.setState({layout: layout});
},

Answer 3

@Dirk-Jan 解释得很好。但恕我直言，正确的解决方案是删除道具调用：

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

所以有意义的部分还在。在示例中，test-hook.jsx 父级必须掌握布局，以便它可以将其显示在布局容器之外以用于演示目的。在实际应用程序中，我们不需要它。

在使用 react-grid-layout 示例时遇到问题

Having trouble with react-grid-layout example

reactjs

react-grid-layout