React 学习笔记 —— Portal

本文主要是介绍React 学习笔记 —— Portal，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

作用

• portal 即传送门，他可以将组件渲染到指定元素下，而不限于当前书写的 JSX 层级结构
• 用途：当需要将某个元素始终保持在顶层时，可以使用 protal 将其传入到 body 下

代码

// App.jsx
import { createPortal } from "react-dom";const Inner = () => {// 此处返回的 JSX 是经过 createPortal 包装处理过的return createPortal(<div id="Inner">I'm Inner</div>, document.body);
};const Outter = () => {return (<div id="outter">// 即使这里将他写在了 outter 下，他仍然被渲染在了 body 内<Inner /></div>);
};export default function App() {return (<div className="App"><Outter /></div>);
}

效果截图

注意事项

• 虽然被传送的元素没有按书写的JSX层级渲染，但是事件冒泡仍然和被传送之前一样
• 代码如下：

// App.jsx
import { createPortal } from "react-dom";// 分别给 Inner、Outter 绑定点击监听
const Inner = () => {return createPortal(<divid="Inner"onClick={() => {console.log("Inner be clicked");}}>I'm Inner</div>,document.body);
};const Outter = () => {return (<divid="outter"onClick={() => {console.log("Outter be clicked");}}><Inner /></div>);
};export default function App() {return (<div className="App"><Outter /></div>);
}

• 点击 Inner 之后，查看效果截图，可以看到 Outter 的事件也在冒泡时被触发了：
  

这篇关于React 学习笔记 —— Portal的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---