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

Question

当我遇到一些障碍时，我一直试图进入 React 并且正在研究 react-grid-layout。我基本上按原样粘贴了这里的示例，但出于某种原因，当我拖动一个元素时，它不会粘住。我在控制台中遇到的错误是：

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 个地方可以保存您的数据，在其父组件中和在您的组件本身中。你的父级在声明它时通常有 props，因为这些是你传递给子级的属性（就像 HTML 标签中的属性）。然后我们有状态，它是组件本身内部的数据。

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

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

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