React.createPortal 及 Modal 的新實現方式

今天有看到同事寫的代碼，

ReactDOM.createPortal，哦豁這是什么API沒有使用過

然后百度了一下，原來這個API可以使自己寫的組件或者元素掛載到任意你你想掛載的dom元素上，

 

ReactDOM.createPortal的使用方法

react-dom 提供的具體方法是ReactDOM.createPortals(child,container) ，該方法需要兩個參數，第一個參數是需要掛載的組件實例，而第二個參數則是要掛載到DOM節點。

一般來說第一個參數可能需要傳遞的是需要掛載的this.props.children

 

我們可以利用這個API將自己寫的彈窗掛載到body上面。

class ModalContainer extends Component {
  constructor(props) {
    super(props);
    this.el = document.body;
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
  }
  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    );
  }
}