srcmini上一章ReactJS实战教程请查看：React实现Redux实例全解
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="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%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树的能力。
评论前必须登录！
注册