react-beautiful-dnd 在 next.js 上不可拖动

Question

我正在尝试使用 Next JS 12.3.1 制作一个带有可拖动组件的 Web 应用程序，使用 React-beautiful-dnd 版本 13.1.1。现在，我只是想获得一个可拖动组件的垂直列表来工作

import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

export default function BigOlList() {

const defaultList = ["A", "B", "C", "D", "E"];
// React state to track order of items
const [itemList, setItemList] = useState(defaultList);

// Function to update list on drop
const handleDrop = (droppedItem) => {
  // Ignore drop outside droppable container
  if (!droppedItem.destination) return;
  var updatedList = [...itemList];
  // Remove dragged item
  const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
  // Add dropped item
  updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
  // Update State
  setItemList(updatedList);
};

return (
  <div className="App">
    <DragDropContext onDragEnd={handleDrop}>
        <Droppable droppableId="list-container">
            {(provided) => (
                <div className="list-container" {...provided.droppableProps} ref={provided.innerRef}>
                    {itemList.map((item, index) => (
                        <Draggable key={item} draggableId={item} index={index}>
                            {(provided) => (
                                <div className="item-container"
                                {...provided.dragHandleProps}
                                {...provided.draggableProps}
                                ref={provided.innerRef}
                                >
                                    {item}
                                </div>
                            )}
                        </Draggable>
                    ))}
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
        </DragDropContext>
  </div>
);
}

我尝试遵循示例，但我的项目都不可拖动。当我将鼠标悬停在框上时，可抓取的光标甚至不显示。这只是一个普通的指针。我听说_document.js中需要调用resetServerContext，所以我就这样做了，但没有什么区别。该应用程序仍然可以编译，没有任何问题、错误或其他任何损坏的迹象。有人对这个库有更多的经验，或者知道另一个更受支持的库吗？

Answer 1

将react-beautiful-dnd与next.js一起使用存在一些问题。

查看这篇文章或这个。

如果这些都不适合您，或者您无法进行如下更改：

// reactStrictMode: true,

（我不能），我建议切换到 DnD-kit。您可以在此处找到文档。

对我来说效果很好。

Answer 2

在下一个配置文件中您可以添加，

   /** @type {import('next').NextConfig} */
    const nextConfig = {
        reactStrictMode: false,
    }
    
    module.exports = nextConfig

它对我来说非常有效。