createportal

createPortal() 是 React 中的一个方法，它可以将组件渲染到 DOM 树中的任意位置，而不是组件原本所在的位置。这个方法通常用于在 React 应用中创建模态框、悬浮框、通知栏等需要脱离组件原本位置的 UI 元素。

下面是一个使用 createPortal() 渲染模态框的例子：

import React from 'react';
import ReactDOM from 'react-dom';

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      <div className="modal">
        <div className="modal-content">
          <h2>{this.props.title}</h2>
          <p>{this.props.content}</p>
          <button onClick={this.props.onClose}>Close</button>
        </div>
      </div>,
      document.getElementById('modal-root')
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showModal: false };
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);  }

  handleOpenModal() {
    this.setState({ showModal: true });
  }

  handleCloseModal() {
    this.setState({ showModal: false });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <button onClick={this.handleOpenModal}>Open modal</button>
        {this.state.showModal && (
          <Modal
            title="Modal title"
            content="This is the modal content."
            onClose={this.handleCloseModal}
          />
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，我们定义了一个 Modal 组件，它包含一个标题、内容和一个关闭按钮。在 Modal 组件的 render() 方法中，我们使用 createPortal() 方法将 Modal 组件渲染到 id 为 modal-root 的 DOM 元素中。在 App 组件中，我们定义了一个状态 showModal，用于控制 Modal 组件的显示和隐藏。当用户点击“Open modal”按钮时，我们将 showModal 状态设置为 true，从而显示 Modal 组件。当用户点击 Modal 组件中的“Close”按钮时，我们将 showModal 状态设置为 false，从而隐藏 Modal 组件。