React@16.x（17）Portals

本文主要是介绍React@16.x（17）Portals，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一句话总结：和 Vue3 的 Teleport 一个效果。

1，使用

import React, { PureComponent } from "react";
import ReactDOM from "react-dom";// 返回一个 React 元素（ReactNode）
const ChildA = ReactDOM.createPortal(<h2 className="portal">标题2</h2>, document.body);export default class App extends PureComponent {render() {return (<div className="outer"><h1>标题1</h1>{ChildA}</div>);}
}

渲染后的 DOM 结构：

2，事件冒泡

增加一个事件：

export default class App extends PureComponent {render() {return (<divclassName="outer"onClick={(e) => {console.log(e.target);}}><h1>标题1</h1>{ChildA}</div>);}
}

点击2个标题的打印效果：

原因：

1. React中的事件是包装过的；
2. 它的事件冒泡是根据虚拟DOM树来冒泡的，与真实的DOM树无关。

---

以上。

这篇关于React@16.x（17）Portals的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---