【react】createPortal &路由鉴权高阶组件

折桂怀橘

于 2023-01-03 16:30:54 发布

阅读量234

点赞数 1

分类专栏：前端相关知识文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42910765/article/details/128534242

版权

81 篇文章 8 订阅

订阅专栏

本文介绍了如何使用React的createPortal创建传送门效果，将组件挂载到任意节点，并在组件卸载时正确清理，防止重复渲染。同时讨论了基于hooks的路由鉴权高阶组件的实现，提供了一种在React应用中进行权限管理的方法。

摘要由CSDN通过智能技术生成

createPortal

react Portal实现传送门（可以把组件挂载到任意节点上）父组件调用子组件的可用
运用

import {createPortal} from 'react-dom'
ReactDOM.createPortal(someDIv, someId) // someDIv 组件dom 元素。someId  某个节点

在componetWillUnmout取消绑定，不然会造成重复渲染

componentWillUnmount () {
   // 删除this.node
   window.document.body.removeChild(someId)
 }

在这里插入图片描述

卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById(‘root’));

在这里插入图片描述

在这里插入图片描述

关注

专栏目录