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