react 中的 Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

语法：ReactDOM.createPortal(child, container);

第一个参数child是：可渲染的react子项，比如元素、字符串.....， 第二个参数是一个dom元素

 Portal 的最常见用例是子组件需要从视觉上脱离父容器；

withPortal.js 

import React, { Component } from 'react';
import { createPortal } from 'react-dom';

// 高阶组件
function withPortal(WrappedComponent) {
  return class extends Component { 
    render() { 
      return (
        createPortal(<WrappedComponent {...this.props}></WrappedComponent>,
        document.querySelector('body')
        )
      )
    }
  }
}
export default withPortal;

 Appa.js

import React, { Component } from 'react';
import withPortal from './withPortal';
import './Appa.css';

@withPortal
class Appa extends Component {
  render() {
    return (
      <div className='modal'> sasa </div>
    );
  }
}
export default Appa;

Portal.js

import React, { Component } from 'react';
import Appa from './Appa';
export default class Portal extends Component {
  state = {
    count:0
  }
  handlerClick = () => {
    this.setState({
      count: ++this.state.count
    })
  }
  render() {
    return (
      <div onClick={this.handlerClick}>
        {this.state.count}
        <h1>我是title</h1>
        <button>点击</button>
        <Appa></Appa>
      </div>
    );
  }
}

真实dom结构： 

虚拟dom：