using-a-portal.zh.md

使用 portal

本指南将介绍，在拖拽时，如何让您的Draggable变成一个React.Portal.

⚠️ 目前，在 一个touchstart 之后将物品变成 React Portal无法正常工作 😞.反应问题:#13113。我们在这里跟踪它:#582.由于 React Portal 的这个问题, 若使用 React Portal,拖放将无法在触摸设备上运行

背景

我们在拖动时，将元素留在原位。在我们移动它们时，我们应用position: fixed到此元素。这非常强大,可以让你拥有position: relative | absolute | fixed父母。然而,不幸的是position:fixed是可会受到transform影响(如transform: rotate(10deg);)。这意味着,如果你在一个transform: *上，而其的一个父母是一个Draggable。那拖动时定位逻辑将不正确。不过! 对于大多数消费者来说,这不是问题.

要解决此问题,您可以使用portal.

Portals

等等,什么是portal?一个portal是当前组件树之外的另一个 DOM 节点。通过使用 portal,您在拖动时可以移动Draggable进入另一个 DOM 节点。这可以让你绕过position: fixed局限.

默认情况下不使用React.Portal

React 为使用portals提供了第一类 api:React.Portal。最初我们想要将它用于所有的Draggable。不幸的是,它有很大的性能损失 - 特别是在拖动有很多孩子的节点时(反应问题)。原因是因为组件变成React.Portal需要mount和重新mount,这是非常昂贵的.因此,我们目前不支持开箱即用.

如果你的Draggable没有很多孩子节点,欢迎您在react-beautiful-dnd上使用React.Portal。如果你只是在一个列表简单拖动卡片，那么你的React.Portal应该还好。但是,如果您拖动一个满是卡片的列,那么当拖动开始时,您将获得明显的不适.

例

我们创造了一个工作实例，其指导你React.Portal的使用。你可以查看源码

表格

如果正在对<table>的重新排序的进行拖和放，我们也在表格指南里面创建了一个 portal