将 react-beautiful-dnd 与 Next.js 和 TypeScript 一起使用

将 react-beautiful-dnd 与 Next.js 和 TypeScript 一起使用

Next.js + TS + react-beautiful-dnd

介绍

反应美丽的 dnd 是专门为列表（垂直、水平、列表之间的移动、嵌套列表等）构建的更高级别的抽象。在该功能子集中 反应美丽的 dnd 提供强大、自然、美观的拖放体验。但是，它不提供由 反应-dnd .所以 反应美丽的 dnd 可能不适合您，具体取决于您的用例。

（资源： https://github.com/atlassian/react-beautiful-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 + 打字稿 在此分步指南中。

技术栈

  • Next.js — 一个广泛使用的构建框架 反应 应用
  • 打字稿
  • 尾风CSS — 实用优先的 CSS 框架，可帮助您专注于工作
  • Nvim — 基于 Vim 的文本编辑器

使用 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）：

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/40094/51243021

posted @ 2022-09-30 21:51  哈哈哈来了啊啊啊  阅读(355)  评论(0)  编辑  收藏  举报