Reactjs 使用react网格布局示例时遇到问题

我一直试图进入react，在查看react网格布局时，遇到了一些障碍。我已经按原样粘贴了示例，但由于某种原因，当我拖动一个元素时，它没有粘住。我在控制台中遇到的错误是：

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'))

“严格使用”；
var React=要求（'React'）；
var=要求（'lodash'）；
var ResponsiveReactGridLayout=require（'react-grid-layout'）。响应；
/**
*此布局演示如何使用具有动态元素数的网格。
*/
var AddRemoveLayout=React.createClass({
getDefaultProps（）{
返回{
类名：“布局”，
cols:{lg:12，md:10，sm:6，xs:4，xxs:2}，
行高：100
};
},
getInitialState（）{
返回{
项：[0,1,2,3,4]。映射（函数（i，键，列表）{
返回{i:i，x:i*2，y:0，w:2，h:2，add:i==list.length-1}；
}),
新计数器：0
};
},
createElement（el）{
var removeStyle={
位置：'绝对'，
右：“2px”，
排名：0，
光标：“指针”
};
变量i=el.add？'+'：el.i；
返回(
{el.add？
加+
：{i}
x
);
},
onAddItem（）{
console.log（'adding'，'n'+this.state.newCounter）；
这是我的国家({
//添加新项目。它必须具有唯一的密钥！
项目：this.state.items.concat({
i:'n'+this.state.newCounter，
x:this.state.items.length*2%（this.state.cols | 12），
y:无穷大，//放在底部
w:2，
h:2
}),
//递增计数器以确保密钥始终唯一。
newCounter:this.state.newCounter+1
});
},
//我们使用从这里返回的COL来计算在哪里添加新项目。
onBreakpointChange（断点，cols）{
这是我的国家({
断点：断点，
科尔斯：科尔斯
});
},
onLayoutChange（布局）{
此.道具.onLayoutChange（布局）；
this.setState（{layout:layout}）；
},
onRemoveItem（一）{
console.log（'removing'，i）；
this.setState（{items:\.reject（this.state.items，{i:i}）}）；
},
render（）{
返回(
添加项
{{.map（this.state.items，this.createElement）}
);
}
});
module.exports=AddRemoveLayout；
React.render（，document.getElementById（'app'））

您收到的错误是关于缺少道具的错误。在react组件中，基本上有两个位置来保存数据，一个在其父组件中，另一个在组件本身中。您的父级在声明时通常会有一些道具，因为这些道具是您传递给子级的属性（就像HTML标记中的属性）。然后，我们有一个状态，它是组件本身内部的数据

---

您收到的错误是，我们没有从父级获取所需的道具（您还可以看到，在onLayoutChange（布局）函数中，正在调用this.props.onLayoutChange（布局）方法）

所以基本上我们缺少一些道具。在GitHub的示例中，有一个名为test-hook.jsx（）的根文件。此根节点作为子节点（您试图直接呈现的代码）传递所需函数作为属性

---

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

您收到的错误是关于缺少道具的错误。在react组件中，基本上有两个位置来保存数据，一个在其父组件中，另一个在组件本身中。您的父级在声明时通常会有一些道具，因为这些道具是您传递给子级的属性（就像HTML标记中的属性）。然后，我们有一个状态，它是组件本身内部的数据

---

您收到的错误是，我们没有从父级获取所需的道具（您还可以看到，在onLayoutChange（布局）函数中，正在调用this.props.onLayoutChange（布局）方法）

所以基本上我们缺少一些道具。在GitHub的示例中，有一个名为test-hook.jsx（）的根文件。此根节点作为子节点（您试图直接呈现的代码）传递所需函数作为属性

---

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

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

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

删除此项：

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

---

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

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

删除此项：

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

---

@德克·扬解释得很好。但IMHO的正确解决方案是删除道具调用：

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

---

因此，有意义的部分仍然存在。在示例中，test-hook.jsx父级必须掌握布局，以便能够在布局容器外部显示布局，以便于演示。在现实世界的应用程序中，我们不需要它。

@Dirk-Jan对此进行了很好的解释。但IMHO的正确解决方案是删除道具调用：

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

因此，有意义的部分仍然存在。在这些示例中，test-hook.jsx父级必须掌握布局，以便能够在布局容器外部显示布局，以进行演示