Question

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

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

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

国际海事组织，我认为通过交易html惯例获得更多灵活性并不是一件好事。而官方提供的example并不能说服我。

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

感谢

Answer 1

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

docs也具体说明：

注意：

重要的是要记住，在使用门户网站时，您需要确保遵循正确的辅助功能指南。

例如，可以使用createPortal()构建文档show how a modal。您会注意到模态是在#modal-root元素中创建的，#app-root元素是createPortal()元素旁边的根元素。这是一个很好的示例，说明如何在不违反任何HTML规则的情况下使用<div id="app-root"></div> <div id="modal-root"></div>。

Private Sub CheckBox2_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles CheckBox2.CheckedChanged Dim xlApp As Excel.Application Dim xlWorkBook As Excel.Workbook Dim xlWorkSheet As Excel.Worksheet Dim i As Integer = 3 xlApp = New Excel.Application xlWorkBook = xlApp.Workbooks.Open("C:\Users\JDoe\Documents\Ben's Project\Food.xlsx") xlWorkSheet = xlWorkBook.Worksheets("Revision Dates") If CheckBox2.Checked = True Then Panel2.Show() CheckBox1.Enabled = False ListBox1.Show() Label3.Show() 'istBox1.Items.Add(xlWorkSheet.Range("A1", "A14").Value) Do ListBox1.Items.Add(xlWorkSheet.Cells(i, 1)) i += 1 Loop Until xlWorkSheet.Cells(i, 1).value = "01/01/01" Else Panel2.Hide() ListBox1.Hide() Label3.Hide() CheckBox1.Enabled = True End If End Sub

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元素，单个组件的所有逻辑也可以在一个地方。

Answer 3

当您需要在父组件的DOM层次结构之外渲染组件时，

Portals是非常有用的功能。

使用以下语法定义门户网站：

ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的React子节点，例如元素，字符串或片段。第二个参数（容器）是一个DOM 元件。

请参阅以下教程，了解如何以及使用门户网站的原因：

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

何时使用React 16门户

3 个答案: