将 react-beautiful-dnd 与 Next.js 和 TypeScript 一起使用
Next.js + TS + react-beautiful-dnd
介绍
反应美丽的 dnd是专门为列表（垂直、水平、列表之间的移动、嵌套列表等）构建的更高级别的抽象。在该功能子集中反应美丽的 dnd提供强大、自然、美观的拖放体验。但是，它不提供由反应-dnd.所以反应美丽的 dnd可能不适合您，具体取决于您的用例。
动机
虽然根据它在你的 React 应用程序中实现它很简单 API 文档， 它仍然需要额外的配置才能使其在您的 Next.js 应用程序中工作。因此，这篇文章将逐步指导您如何设置[ 反应美丽的 dnd](https://github.com/atlassian/react-beautiful-dnd) 并修复 Next.js 应用程序中的潜在问题（使用 TypeScript）。最后以一个简单的todo app为例进行演示[ 反应美丽的 dnd](https://github.com/atlassian/react-beautiful-dnd) + Next.js + 打字稿 在此分步指南中。
技术栈
使用 TypeScript、TailwindCSS 和基于 vim 的文本编辑器设置 Next.js 应用程序
如果这是您第一次尝试使用 TypeScript 和 Tailwind 以及基于 vim 的文本编辑器设置 Next.js 应用程序，那么您可能想查看我以前的帖子 — 如何使用 Neovim、typescript 和 tailwindCSS 设置 next.js 应用程序工作流。
在这个基本设置之后，让我们继续实现 反应美丽的 dnd 在我们的 Next.js 应用程序中。
制作 反应美丽的 dnd 在 Next.js 中工作
让我们尝试使用以下方法创建一个简单的拖放看板 拖放上下文 , 可丢弃 ， 和 可拖动 , 从中你将有一个基本的了解 **拖放。**
拖放组件结构如下所示：
演示一个拖放应用程序（ 代码仓库 ) 内置 反应美丽的 dnd
A task’s lifecycle: create, delete, reorder and move to other columns
以下是我们希望在上述应用程序中实现的目标：
- 构建一个可放置的容器
- 使列表项可水平（列内）和垂直（列之间）拖动
第 1 步：安装依赖项
反应美丽的 dnd[ @types/react-beautiful-dnd](https://twitter.com/types/react-beautiful-dnd)（只有在使用 TypeScript 时才需要这个）
现在您可以从 反应美丽的 dnd ：
第 2 步：用 拖放上下文 API
提示：如果您可以查看 React 组件的全貌，请不要担心，因为代码仓库链接已在本文末尾共享。
第 3 步：使用 Droppable API 构建可放置容器
构建可放置容器以允许项目可以水平和垂直拖动。
todos.tsx
不要被上面的代码淹没。你唯一需要了解的是 可丢弃 容器是使用创建的 可丢弃 组件，您必须提供 droppableId 可以是任何唯一的字符串和回调函数： (droppableProvided) => (..ref={droppableProvided.innerRef} {…droppableProvided.droppableProps}) .这就是创建 Droppable 容器的全部内容。接下来，我们将创建 可拖动 要成为的组件
第 3 步：使用 Draggable API 在 Droppable 容器中实现 Draggable 功能
todoitem.tsx
如同 可丢弃 组件，我们还需要提供一个 可拖动 ID 这是任何唯一的字符串和一个回调函数： (draggableProvided) => (..ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} {...draggableProvided.draghandleProps)。
第 4 步：运行 Next.js 应用程序并出现问题
问题 #1 ： 在上下文“0”中找不到任何拖动句柄
解决方案 : 覆盖 文档
Next.js 的服务器端渲染功能可能会扰乱库的运行方式，而这样的库就是[ 反应美丽的 dnd](https://twitter.com/types/react-beautiful-dnd) . 要解决上述问题，我们需要使用 重置服务器上下文 在里面打电话 文档 这样服务器的标记就不会与客户端库（依赖项）期望的内容冲突（ 反应美丽的 dnd 在我们的例子中）。然后我们需要覆盖默认值 文档 ( 页面/_document.js )，如下图所示：
You can follow the docs for the __document_ here: https://nextjs.org/docs/advanced-features/custom-document
我们需要导入 重置服务器上下文 从 反应美丽的 dnd 并在我们的 获取初始道具 在我们返回之前。所以，这就是 _文档 好像：
问题 #2： 找不到带有 id 的可放置条目
到目前为止，您可能仍然会看到类似以下的问题：
解决方案： 消除 反应严格模式
您也可以在 Github问题页面 .还不错，因为它只发生在开发环境中，而不是生产环境中。然而，为了让我们的开发更容易，我们只需要在里面注释掉下面的代码 next.config.js
// reactStrictMode: true,
使用 react-beautiful-dnd + Next.js + TypeScript
你可以找到一个 Todo 应用程序使用 反应美丽的 dnd 在回购中： https://github.com/amy-juan-li/example-dnd-todo
有用的资源和教程由 亚历克斯·里尔登 （作者 反应美丽的dnd）：
- 重新思考拖放
- React 播客：快速、可访问且美观的拖放
- 一个 免费课程
[ 蛋头.io](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) - https://codesandbox.io/examples/package/react-beautiful-dnd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/40094/51243021
标签：beautiful,dnd,TypeScript,Next,react,js,拖放 From： https://www.cnblogs.com/amboke/p/16746379.html