如何在React 15中实现React Portal功能？

Question

我在当前项目中使用了react 15，但是我想在下拉菜单中在屏幕上显示叠加层。在React 16中，我们可以使用React门户将子代渲染到父组件的DOM层次结构之外的DOM节点中。 如何在React 15版本中实现相同？

Answer 1

您最好的选择是创建父组件，该父组件除了创建用来保存叠加层的另一个组件外，还管理您最初拥有的子组件。基本思想如下：

ParentComponent -> ChildCallingComponent
                -> ChildOverlayComponent

然后，当您想要显示叠加层时，在ChildCallingComponent中，使用prop回调请求ParentComponent更改它发送给ChildOverlayComponent的数据，例如showOverlay = {true}。

请注意，根据您的应用程序的大小以及您希望在DOM树中插入叠加层的级别，父组件可能会有许多回调。更好的解决方案是使用Redux之类的状态管理库，然后您可以在一个调用中直接将状态从ChildCallingComponent更改为ChildOverlayComponent。

Answer 2

为某些React 16+功能（包括门户）提供了第三方React 15端口。

react-portal为React 15和16+中的门户提供了通用API。如果当前的React版本不支持门户网站（React.createPortal，它将使用own portal implementation。