react modal封装

React中的Modal组件可以用于实现弹窗、提示框等功能。下面是一个简单的Modal组件的封装示例：

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

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

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() {
    const { children, onClose } = this.props;

    return ReactDOM.createPortal(
      <div className="modal">
        <div className="modal-content">
          {children}
          <button onClick={onClose}>Close</button>
        </div>
      </div>,
      this.el
    );
  }
}

export default Modal;

在上述代码中，我们定义了一个名为Modal的组件，并使用ReactDOM.createPortal方法将其渲染到modalRoot中，实现了Modal的弹出效果。Modal组件接收两个props，分别是children和onClose。其中，children用于传递Modal中的内容，onClose用于处理Modal的关闭事件。

使用Modal组件时，我们可以在父组件中定义一个state，用于控制Modal的显示和隐藏：

import React from 'react';
import Modal from './Modal';

class App extends React.Component {
  state = {
    showModal: false
  }

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

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

  render() {
    const { showModal } = this.state;

    return (
      <div>
        <button onClick={this.handleOpenModal}>Open Modal</button>
        {showModal &&
          <Modal onClose={this.handleCloseModal}>
            <h2>Modal Title</h2>
            <p>Modal Content</p>
          </Modal>
        }
      </div>
    );
  }
}

export default App;

在上述代码中，我们在父组件中定义了一个showModal状态，用于控制Modal的显示和隐藏。当用户点击“Open Modal”按钮时，我们将showModal设置为true，从而显示Modal组件。当用户点击Modal中的“Close”按钮时，我们调用handleCloseModal方法，将showModal设置为false，从而隐藏Modal组件。

通过封装Modal组件，我们可以在React应用中方便地实现弹窗、提示框等功能，并且可以灵活地控制Modal的显示和隐藏。