使用react-grid-layout示例有问题

Question

我一直在尝试进入react，并在查看react-grid-layout时遇到了一些障碍。我基本上是按原样粘贴了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组件中，您基本上有两个位置来保存数据，在其父组件中和在组件本身中。您的父级在声明它时通常有道具，因为这些属性是您传递给子级的属性(就像HTML标记中的属性)。然后我们有了状态，它是组件本身内部的数据。

您收到的错误是，我们没有从父级那里获得所需的属性(您还可以看到，在onLayoutChange(布局)函数内部，正在调用this.props.onLayoutChange(布局)方法)。

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

您可以使用test-hook.jsx，也可以编写自己的根节点，它具有布局的状态和更新该状态所需的函数(有关如何执行此操作，请参阅github示例)。

Answer 2

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

只需完全删除此函数并使用默认值即可解决此问题。

删除此命令：

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

Answer 3

@Dirk-Jan很好地解释了这一点。但正确的解决方案是删除prop调用：

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

因此，有意义的部分仍然存在。在示例中，test-hook.jsx父级必须获得布局，以便可以出于演示目的在布局容器之外显示布局。在现实世界的应用程序中，我们不需要这样做。