Portals使用

• 某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元 素上的）。
• Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：

• 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；
• 第二个参数（container）是一个 DOM 元素；
  ReactDom.createProtal(child, container);

• 通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：
• 然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：比如我们可以用这个特性开发一个 modal 组件

• 步骤一:修改 index.html 添加新的节点

<div id = "root"> </div>
<!-- 新添 modal 节点 -->
<div id = "modal"> </div> 

• 步骤二: 编写这个节点的样式

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: red;
}