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

Question

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

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

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

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

Answer 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>
);