Portals

Portals基本使用

import React from 'react';
import ReactDOM from 'react-dom'
class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      document.getElementsByTagName('body')[0]
    )
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div id={'app'}>
        <Modal>
          <h1>我将会渲染到body元素下</h1>
        </Modal>
      </div>
    )
  }
}
export default App;
  •  props.children 包含组件的开始标签和结束标签之间的内容
  •  ReactDOM.createPortal 函数接收两个参数,需要渲染的内容和将内容渲染到什么地方去
posted @ 2021-12-07 21:57  霸哥yyds  阅读(163)  评论(0)    收藏  举报