一般默认是渲染到root上，如果不想渲染到root上则使用React-Protal 挂载到其他组件上
- 默认情况下, 所以的组件都是渲染到root元素中的
Portal提供了一种将组件渲染到其它元素中的能力
https://zh-hans.reactjs.org/docs/portals.html
用法：
- 引入react-dom
import ReactDOM from 'react-dom';
- 将返回的组件放入ReactDOM.createPortal()
用法
this.props.children: 可以获取到当前组件所有的子元素或者子组件
createPortal: 接收两个参数
第一个参数: 需要渲染的内容
第二个参数: 渲染到什么地方
class Modal extends React.PureComponent{ render() { return ReactDOM.createPortal(this.props.children, document.getElementById('other')); } } class App extends React.PureComponent{ constructor(props){ super(props); } render(){ return ( <div id={'app'}> <Modal> <div id={'modal'}>Modal</div> </Modal> </div> ) } } export default App;
//index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <title>React App</title> </head> <body> <div id="root"></div> <div id="other"></div> </body> </html>
