知道react里面的createPortal么？说说使用场景。

不要秃头啊啊

已于 2023-05-27 09:46:28 修改

阅读量331

点赞数

文章标签： react.js javascript 前端

于 2023-03-20 21:19:54 首次发布

本文链接：https://blog.csdn.net/m0_60676278/article/details/129676251

版权

知道react里面的createPortal么？说说使用场景。之前react没有这个的时候是怎么实现的，有他没他的区别？

react.createPortal 来制作弹窗组件，它在Modal 组件位置进行 fixed 定位，可以任意的挂载到某个dom元素上，使用后的管理更方便，但是注意需要预留html的挂载元素

代码如下：

ReactDOM.createPortal(child, container)

<html>
  <body>
    <div id="root"></div>
    <div id="modal"></div>
  </body>
</html>

const modalRoot = document.getElementById('modal');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

在没有这个组件之前我们可以自己定义组件，然后去实现Modal效果
代码如下：

// Modal.js文件中 
const styles = { 
  modal: { 
    position: 'fixed', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    backgroundColor: 'rgba(0,0,0,0.3)', 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center' 
  } 
} 
 
class Modal extends Component { 
  constructor(props) { 
    super(props); 
  } 
  render() { 
    return ( 
      <div style={styles.modal}> 
        {this.props.children} 
      </div> 
    ); 
  } 
}