使用 React Portals 实现 Modal 组件-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 应用的发展，Modal 组件已经成为了前端项目中不可或缺的一部分，它可以让用户在操作过程中保持当前的上下文，并在弹出窗口中完成一些操作。而 React Portals 可以帮助我们更加轻松地实现 Modal 组件。本篇文章将详细介绍如何使用 React Portals 实现 Modal 组件。

React Portals 简介

React Portals 可以让我们将 DOM 节点渲染到任意的父节点中，而不是一定要在组件的祖先 DOM 节点中进行渲染。这对于实现 Modal 组件来说非常有用，因为它可以让我们将 Modal 的 DOM 节点渲染到顶层的 DOM 节点中，而不是在组件树中的某个节点中。

在本篇文章中，我们将使用 React Portals 来实现一个简单的 Modal 组件。首先，我们需要引入 React 和 react-dom：

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

然后，我们需要创建一个新的 DOM 节点，用于渲染 Modal：

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

接下来，我们定义一个 Modal 组件，并使用 React Portals 将其渲染到 modalRoot 中：

// javascriptcn.com 代码示例
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 组件的 constructor 中创建了一个新的 div 节点。在 componentDidMount 中，我们将该节点插入到 modalRoot 中。在 componentWillUnmount 中，我们从 modalRoot 中移除该节点。最后，我们使用 React Portals 的 createPortal 方法将 Modal 组件的子元素渲染到该节点中。

下面是一个使用 Modal 组件的例子：

// javascriptcn.com 代码示例
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showModal: false };
    this.toggleModal = this.toggleModal.bind(this);
  }
  
  toggleModal() {
    this.setState({ showModal: !this.state.showModal });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.toggleModal}>Show Modal</button>
        {this.state.showModal &&
          <Modal>
            <div>
              <h1>Hello, world!</h1>
              <button onClick={this.toggleModal}>Hide Modal</button>
            </div>
          </Modal>
        }
      </div>
    );
  }
}

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

在上述代码中，我们首先定义了一个 App 组件。它有一个 state 变量 showModal，表示是否显示 Modal。在 toggleModal 中，我们更新 showModal 的值。在 App 组件的 render 方法中，我们渲染一个按钮，在该按钮的点击事件中调用 toggleModal 方法。如果 showModal 为 true，则渲染一个 Modal 组件，并将一个简单的 div 元素作为其子元素。在该 div 元素中，我们可以添加任何我们需要的内容，例如这里的标题和一个关闭按钮。在关闭按钮的点击事件中，我们再次调用 toggleModal 方法，以隐藏 Modal。

总结

本文介绍了如何使用 React Portals 实现 Modal 组件。首先，我们简单介绍了 React Portals 的作用和原理。然后，我们详细讲解了如何通过创建一个新的 DOM 节点，使用 React Portals 将 Modal 组件渲染到该节点中。最后，我们给出了一个使用 Modal 组件的示例代码。希望读者们可以从本文中收获一些有用的内容，能够更好地实现自己的项目。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a29b87d4982a6ebc83a95