如何在我们的应用程序中使用 react-dnd-scrollzone。？答案

【问题标题】：How to use react-dnd-scrollzone in our application.?如何在我们的应用程序中使用 react-dnd-scrollzone。？
【发布时间】：2017-05-29 11:13:44
【问题描述】：

我对 reactJS 很陌生。我必须使用拖放组件添加autoscrolling 功能。这就是我使用 react-dnd-scrollzone 的原因。在使用“https://github.com/azuqua/react-dnd-scrollzone”中的示例时，我遇到以下错误：

'Scrollzone' 未定义 'ScrollingComponent' 被赋值但从未使用过

如果有人可以帮助我，请告诉我如何在我的代码中使用它。下面的 sn-p 显示了我使用滚动区域的几行代码。

const DndComponent = DragDropContext(HTML5Backend)(ScheduleBoard);
const ScrollingComponent = withScrolling(ScheduleBoard);
const vStrength = createVerticalStrength(500);
const hStrength = createHorizontalStrength(300);

const zone = (
  <Scrollzone verticalStrength={vStrength} horizontalStrength={hStrength}/>

 
);
  
export default connect(
  mapStateToProps,
  {
    clearErrors,
    getToday,
    setPage,
    getDepartments,
    getTaskList,
    getUnscheduledTasks,
    unscheduleTask,
    putUnscheduleTask,
    rescheduleTask,
    putRescheduleTask,
    mergeTasks,
    putMergeTasks,
    unmergeTasks,
    putUnmergeTasks,
    resizeWindow,
    startLoader,
    startDeptLoader,
    unscheduledFilter,
    createReservationNote,
  }
)(DndComponent);

【问题讨论】：

标签： javascript reactjs drag-and-drop react-redux react-dnd

【解决方案1】：

您忘记了 react-dnd-scrollzone 文档中所说的定义 ScrollZone。这是基本示例。

import withScrolling, { createVerticalStrength, createHorizontalStrength } from 'react-dnd-scrollzone';

const Scrollzone = withScrolling('ul');
const vStrength = createVerticalStrength(500);
const hStrength = createHorizontalStrength(300);

// zone will scroll when the cursor drags within
// 500px of the top/bottom and 300px of the left/right
const zone = (
  <Scrollzone verticalStrength={vStrength} horizontalStrength={hStrength}>

  </Scrollzone>
);

【讨论】：