某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元 素上的）。
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：
- 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；
- 第二个参数（container）是一个 DOM 元素；
通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：
Modal组件案例
比如说，我们准备开发一个Modal组件，它可以将它的子组件渲染到屏幕的中间位置：
-
步骤一：修改index.html添加新的节点
-
步骤二：编写这个节点的样式
-
步骤三：编写组件代码
import React, {PureComponent} from 'react';
import ReactDom from 'react-dom'
class Modal extends PureComponent {render() {return ReactDom.createPortal(this.props.children,document.getElementById('modal'))}
}
class Home extends PureComponent {render() {return (<div><h2>Home</h2><Modal><h2>Title</h2></Modal></div>);}
}
class App extends PureComponent {render() {return (<div><Home /></div>);}
}
export default App;
