React Portal（插槽）用法全解 – ReactJS实战教程 reactportal|React

上一章ReactJS实战教程请查看：React实现Redux实例全解
【React Portal（插槽）用法全解 – ReactJS实战教程】React 16.0版于2017年9月推出Reac portal，React portal提供了一种在其组件层次结构之外呈现元素的方法，即在一个单独的组件中。
在React 16.0版本之前，很难在父组件层次结构之外呈现子组件。如果我们这样做，它将打破组件需要作为新元素呈现的约定，并遵循父-子层次结构。在React中，父组件总是希望到达其子组件所在的位置。这就是React portal概念出现的原因。
语法

ReactDOM.createPortal(child, container)

这里，第一个参数(子参数)是组件，它可以是元素、字符串或片段，第二个参数(容器)是DOM元素。
React v16之前的示例通常，当你想要从组件的呈现方法中返回一个元素时，它会作为一个新的div挂载到DOM中，并呈现最近的父组件的子元素。

render() { // React将一个新div加载到DOM中，并将子元素呈现到其中 return ( < div> {this.props.children} < /div> ); }

使用portal的例子但是，有时我们希望将子组件插入DOM中的不同位置，这意味着React不想创建新div，我们可以通过创建React portal来实现这一点。

render() { return ReactDOM.createPortal( this.props.children, myNode, ); }

react portal的特点

它使用React版本16及其官方API创建portal。
它有React版本15的备份。
它将其子组件传输到一个新的React portal，该portal默认情况下附加到document.body。
它还可以针对用户指定的DOM元素。
它支持服务器端呈现
它支持返回数组(不需要包装器div)
它使用< Portal />和< PortalWithState />，因此灵活性和方便性之间没有折衷。
它不会产生任何DOM混乱。
它没有依赖，简约。

何时使用portal？React portal的常用用例包括:

modal模态框
工具提示
浮动菜单
小部件

安装portal我们可以使用以下命令安装React portal。

$ npm install react-portal --save

React portal解释使用以下命令创建一个新的React项目。

$ npx create-react-app reactapp

打开App.js文件并插入以下代码片段。
App.js

import React, {Component} from 'react'; import './App.css' import PortalDemo from './PortalDemo.js'; class App extends Component { render () { return ( < div className='App'> < PortalDemo /> < /div> ); } } export default App;

下一步是创建portal组件并将其导入App.js文件。
PortalDemo.js

import React from 'react' import ReactDOM from 'react-dom'function PortalDemo(){ return ReactDOM.createPortal( < h1>Portals Demo< /h1>, document.getElementById('portal-root') ) } export default PortalDemo

现在，打开Index.html文件并添加一个< div id=” portal-root” > < /div> 元素来访问根节点之外的子组件。
index . html

< !DOCTYPE html> < html> < head> < meta charset="utf-8" /> < link rel="shortcut icon" href="http://www.srcmini.com/%PUBLIC_URL%/favicon.ico" /> < meta name="viewport" content="width=device-width, initial-scale=1" /> < meta name="theme-color" content="#000000" /> < link rel="manifest" href="http://www.srcmini.com/%PUBLIC_URL%/manifest.json" /> < title>React App< /title> < /head> < body> < noscript>需要启用JavaScript才能运行此应用程序.< /noscript> < div id="root">< /div> < div id="portal-root">< /div> < /body> < /html>

使用react start运行以上的react程序，然后，打开Inspect (ctrl + shift + I)，在这个窗口中，选择Elements部分，然后单击< div id=” portal-root” >< /div>组件。在这里，我们可以看到每个标记都位于“portal-root”DOM节点之下，而不是“root”DOM节点之下。因此，我们可以看到how React Portal提供了跳出根DOM树的能力。