createPortal

ReactDOM.createPortal 并不直接渲染 DOM 元素，而是渲染一个 React 元素，一个绑定好了挂载点的 React 元素，并且并不随组件引用位置而改变（一般的 React 元素引用位置在哪就在哪里渲染

  • child 是任何可渲染的 Rax 子元素，例如一个元素，字符串或 Fragment
  • container 是一个 Dom 元素
1
createPortal(child, container);

createPortal 和 render 渲染的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//ReactDom.createPortal 渲染
const A = props => {
  const div = document.createElement('div')
  document.body.appendChild(div)
  return ReactDOM.createPortal(<div>gjw</div>, div)
}
------------------------------------------------------------------
//React.render 渲染
class Ex extends React.Component {
  render () {
    <A></A>
  }
}
ReactDOM.render(<Ex/>, document.body)

6、ReactDOM.createPortal 并不直接渲染 DOM 元素，而是渲染一个 React 元素，一个绑定好了挂载点的 React 元素，并且并不随组件引用位置而改变（一般的 React 元素引用位置在哪就在哪里渲染）
ReactDOM.render 直接渲染 DOM 元素，会直接影响页面

7、使用 createPortal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from "react";
//引入 createPortal
import { createPortal } from "react-dom";

class test extends Component {
  constructor(props) {
    super(props);
    //  记录参数 利用window.document
    const doc = window.document;
    console.log(doc, "---获取整个的document");
    // 定义this.node 创建一个div节点
    this.node = doc.createElement("div");
    // console.log(this.node,'--- 在document里面创建div');
    // 当前的body下挂载一个div节点
    doc.body.appendChild(this.node);
    // console.log(doc.body.appendChild(this.node),'在document.body下面追加一个div');
  }
  render() {
    // 实现createPortal
    return createPortal(
      <div className="dialog">
        <h3>Modal</h3>
      </div>,
      this.node
    );
  }
  // 在willUnmount中实现订阅和取消订阅
  componentWillUnmount() {
    window.document.body.removeChild(this.node);
  }
}

export default test;