二月 2 小时前发布
使用了 React16 + 的你,对 Portal 至少有所了解或者熟练使用。
Portal 可以创建一个在你的 root 元素之外的 DOM。
1、通常你的网站只有一个 root
- <body>
- <div id="root"></div>
- </body>
2、使用 Portal 之后,可以变成下面这样
- <body>
- <div id="root"></div>
- <div id="portal"></div>
- </body>
Portal 的 demo 在官网上可以看到,而我们要实现的是将它封装成一个可以复用的组件。
不需要手动在 body 下面增加 html,通过组件自己去创建。
- <CreatePortal
- id, //可以传入id
- className, //可以传入className
- style //可以传入style
- >
- 此处插入div或者react组件
- </CreatePortal>
1、创建一个 createPortal 函数,该函数将会 return 一个 Portal 组件
- function createPortal() {}
- export
- default createPortal()
2、创建 Portal 组件
- import React from 'react'
- import ReactDOM from 'react-dom'
- import PropTypes from 'prop-types'
- function createPortal() {
- class Portal extends React.Component{
- }
- return Portal
- }
- export default createPortal()
3、render 函数实现,用 createPortal 创建 portal。
- render() {
- return ReactDOM.createPortal(
- this.props.children,
- this.el
- )
- }
4、componentDidMount 函数实现,将 dom 添加到 body 下面
- componentDidMount() {
- document.body.appendChild(this.el);
- }
5、componentWillUnmount 函数实现,清除 DOM 结构
- componentWillUnmount() {
- document.body.removeChild(this.el)
- }
6、实现 props,包括 id、className、style
- constructor(props) {
- super(props)
- this.el = document.createElement('div')
- if (!!props) {
- this.el.id = props.id || false
- if (props.className) this.el.className = props.className
- if (props.style) {
- Object.keys(props.style).map((v) => {
- this.el.style[v] = props.style[v]
- })
- }
- document.body.appendChild(this.el)
- }
- }
7、完整代码
- import React from 'react'
- import ReactDOM from 'react-dom'
- import PropTypes from 'prop-types'
- function createPortal() {
- class Portal extends React.Component{
- constructor(props) {
- super(props)
- this.el = document.createElement('div')
- if (!!props) {
- this.el.id = props.id || false
- if (props.className) this.el.className = props.className
- if (props.style) {
- Object.keys(props.style).map((v) => {
- this.el.style[v] = props.style[v]
- })
- }
- document.body.appendChild(this.el)
- }
- }
- componentDidMount() {
- document.body.appendChild(this.el);
- }
- componentWillUnmount() {
- document.body.removeChild(this.el)
- }
- render() {
- return ReactDOM.createPortal(
- this.props.children,
- this.el
- )
- }
- }
- Portal.propTypes = {
- style: PropTypes.object
- }
- return Portal
- }
- export default createPortal()
createPortal 和 Provide 实现思想类似,用函数式编程的思想来完成目标。如果你觉得这东西有用,拿去用吧。
来源: https://segmentfault.com/a/1190000012662858