何时使用React 16门户

Question

React 16发布了许多新功能.其中一个是ReactDOM.createPortal(child, container) API,它可以直观地打破容器.

但是,它似乎不仅打破了它的容器,而且打破了我从Web开发的第一天学到的基本html规则.createPortal API允许您将组件从其父组件中渲染出来,并打破我们期望的html结构约定.

另一方面,我们确实检索了更多的灵活性,现在可以在兄弟或其他组件中呈现DOM.

IMO,我不认为通过交易html惯例获得更多灵活性是一个很好的协议.此外,官方提供的例子并不能说服我.

我很好奇的是:是否有人面临任何条件,createPortal API是必须的？

谢谢

Answer 1

文档中的示例是一些createPortal非常有用的案例- 特别是对话框,hovercards和工具提示.

该文件还具体说明:

注意:

重要的是要记住,在使用门户时,您需要确保遵循正确的可访问性指南.

例如,文档显示了如何使用构建模态createPortal().您会注意到模态是在#modal-root元素中创建的,元素是元素旁边的根#app-root元素.这是一个很好的例子,说明如何createPortal()在不违反任何HTML规则的情况下使用它.

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

Answer 2

几个月前我遇到了另一个用例.由于React 16门户不可用,我不得不使用自制的门户实现.

我正在创建SVG图.所有行,路径等都需要在<svg>元素内部呈现.但我想使用HTML来呈现文本标签(出于多种原因).这意味着图形上的对象及其标签必然位于DOM的不同部分.但是对于门户网站,我仍然可以将所有图形组件的逻辑保持在一起.这是一个虚构的例子:

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

您可以在<svg>元素中使用此组件.该GraphLabel组件将使用门户labelText在HTML div元素中以与其相同的坐标进行渲染<svg>,使用绝对定位将其放置在正确的坐标处.

这样,即使我出于技术原因需要在不同的地方渲染实际的DOM元素,单个组件的所有逻辑也可以在一个地方.