React DnD:连接 DragSource 不是函数
ReactDnD : connectDragSource is not a function
我有一个 top-level 组件,它由几个不同的组件组成。
- InventoryBox - 指定库存包含
的 space
- InventoryList - 指定库存中的项目列表
- 物品 - 库存列表中的单个物品
InventoryBox 是 top-level 组件,因此我将其包装在 DragDropContext 中。我遇到的问题 运行 是我在 collect 函数中指定的 connectDragSource 函数没有将该方法注入到我的项目组件中。
我的收藏功能
function collect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
};
}
我的项目组件
var Item = React.createClass({
render: function(){
var id = this.props.id;
var isDragging = this.props.isDragging;
var connectDragSource = this.props.connectDragSource;
return (
<div className="item">
{this.props.children}
</div>
);
}
});
我的最终目标是将 Item 组件从列表拖到另一个 Inventory Box。
当您在 Item inventoryList 中使用 Item 时,您只是在使用 Item 而不是包装的 Item。 var Item = React.... 但是你需要声明一个变量。
var ItemWrapped = DragSource(Types.INVENTORY, itemSource, collect)(Item);
// Use the ItemWrapped instead.... the same goes for all
DragSourcereturns本源
return function decorateSource(DecoratedComponent) {
return decorateHandler({
connectBackend: (backend, sourceId) => backend.connectDragSource(sourceId),
containerDisplayName: 'DragSource',
createHandler: createSource,
registerHandler: registerSource,
createMonitor: createSourceMonitor,
createConnector: createSourceConnector,
DecoratedComponent,
getType,
collect,
options
});
};
所以你需要处理返回的函数
我有一个 top-level 组件,它由几个不同的组件组成。
- InventoryBox - 指定库存包含 的 space
- InventoryList - 指定库存中的项目列表
- 物品 - 库存列表中的单个物品
InventoryBox 是 top-level 组件,因此我将其包装在 DragDropContext 中。我遇到的问题 运行 是我在 collect 函数中指定的 connectDragSource 函数没有将该方法注入到我的项目组件中。
我的收藏功能
function collect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
};
}
我的项目组件
var Item = React.createClass({
render: function(){
var id = this.props.id;
var isDragging = this.props.isDragging;
var connectDragSource = this.props.connectDragSource;
return (
<div className="item">
{this.props.children}
</div>
);
}
});
我的最终目标是将 Item 组件从列表拖到另一个 Inventory Box。
当您在 Item inventoryList 中使用 Item 时,您只是在使用 Item 而不是包装的 Item。 var Item = React.... 但是你需要声明一个变量。
var ItemWrapped = DragSource(Types.INVENTORY, itemSource, collect)(Item);
// Use the ItemWrapped instead.... the same goes for all
DragSourcereturns本源
return function decorateSource(DecoratedComponent) {
return decorateHandler({
connectBackend: (backend, sourceId) => backend.connectDragSource(sourceId),
containerDisplayName: 'DragSource',
createHandler: createSource,
registerHandler: registerSource,
createMonitor: createSourceMonitor,
createConnector: createSourceConnector,
DecoratedComponent,
getType,
collect,
options
});
};
所以你需要处理返回的函数