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
    );
  }
}
 
 
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM