何时使用React 16门户

Question

React 16发布了许多新功能。其中之一是ReactDOM. createPortal（子，容器）API，这对于直观地脱离其容器很方便。

然而，它似乎不仅打破了它的容器，而且打破了我从web开发的第一天学到的基本html规则。createPortal API使您能够从其父组件中呈现组件，并打破我们预期的html结构约定。

另一方面，我们确实获得了更多的灵活性，现在可以在兄弟或其他组件中渲染DOM。

依我看，我不认为这是一个很好的交易，以获得更多的灵活性，通过交易html公约。官方提供的例子也不能说服我。

我好奇的是：有没有人面临createPortal API是必须的任何条件？

谢啦

Answer 1

当您需要在父组件的DOM层次结构之外呈现组件时，门户是非常有用的特性。

您可以使用以下语法定义门户：

ReactDOM.createPortal(child, container) 

第一个参数（子参数）是任何可呈现的React子参数，例如元素、字符串或片段。第二个参数（容器）是DOM元素。

请参阅以下教程以了解如何以及为什么使用门户：

https://www.youtube.com/watch?v=lOMU9BeIrO4

Answer 2

几个月前，我遇到了另一个用例。因为React 16门户不可用，所以我不得不使用一个自制的门户实现。

我正在创建SVG图形。所有的行、路径等都需要在

const LabeledPoint = ({ x, y, r, labelText }) => [
    <circle cx={x} cy={y} r={r} />,
    <GraphLabel x={x + 5} y={y}>{labelText}</GraphLabel>,
];

您将在中使用此组件

这样，即使出于技术原因需要在不同的位置呈现实际的DOM元素，单个组件的所有逻辑也可以在一个位置。

Answer 3

文档中的示例是createPortal非常有用的一些情况，特别是对话框、悬停卡和工具提示。

文件还特别说明：

注:

请务必记住，在使用门户时，您需要确保遵循适当的可访问性准则。

例如，文档显示了如何使用createPortal（）构建模态。您会注意到modal是在#modal-root元素中创建的，它是与#app-root元素并列的根元素。这是一个很好的例子，说明如何在不违反任何超文本标记语言规则的情况下使用createPortal（）。

<div id="app-root"></div>
<div id="modal-root"></div>