如何在React中实现模态组件

介绍

模态框是应用程序中的独立窗口，通常是一个对话框。 它们是用于提供信息或要求确认的常见用户界面模式。

在本教程中，您将了解如何在您的 React 项目中实现模态组件。 您将创建一个 Dashboard 组件来管理状态和一个按钮来访问模式。 您还将开发一个 Modal 组件来构建一个模式和一个关闭按钮。 单击按钮后，您的项目将显示并关闭模式。

先决条件

要完成本教程，您需要：

• 在开始本教程之前对 React 有一个基本的了解。 您可以通过阅读 如何在 React.js 系列中编写代码来了解有关 React 的更多信息。

第 1 步 — 启动 Dashboard 组件

仪表板是您显示模式的地方。 要开始您的仪表板，请将 React 的实例和 Component 对象导入到您的 Dashboard.js 文件中。 声明一个 Dashboard 组件并设置你的状态：

仪表板.js

import React, { Component } from "react";

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

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

  hideModal = () => {
    this.setState({ show: false });
  };
}

export default Dashboard

您的状态包括值为 false 的属性 show。 这允许您隐藏模式，直到用户提示它打开。 函数 showModal() 使用 .setState() 方法更新您的状态，以在用户打开模式时将 show 属性的值更改为 true。 同样，hideModal() 函数中的 .setState() 方法将关闭模态并将 show 属性中的值更改为 false。

注意： 记得使用 .bind() 方法在 constructor() 上绑定你的函数。

一旦你应用了你的状态和函数，你的 render() 生命周期方法将处理在 return() 语句中显示你的模式：

仪表板.js

import React, { Component } from "react";

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

button 接受 React JSX 属性 onClick 以应用 .showModal() 功能并打开您的模态。 您将 Dashboard 组件导出到连接到根 HTML 文件的高阶 App 组件。

第 2 步 — 构建 Modal 组件

创建一个新文件 Modal.js 并声明一个具有三个参数 handleClose、show 和 children 的无状态功能 Modal 组件。 参数 show 代表您所在州的 show 属性：

模态.js

import './modal.css';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        {children}
        <button type="button" onClick={handleClose}>
          Close
        </button>
      </section>
    </div>
  );
};

你的 return() 语句传递参数 children，表示为 props.children，是对打开和关闭模态的功能的引用。 该模式还包含一个带有 React JSX onClick 属性的按钮，该属性接受 hideModal() 方法，这里表示为参数 handleClose，作为道具传递到您的 [ X183X] 组件。

变量 showHideClassName 为其值分配一个条件，以检查您所在州的 show 属性的值是否为 true。 如果是这样，模态将出现。 否则，模态将隐藏。 用于显示和隐藏模态的属性 display-block 和 display-none 是通过导入 Modal 组件的 modal.css 文件处理的。

启动一个新文件 modal.css，并设置规则来设置 Modal 的大小、颜色和形状的样式：

模态的.css

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal-main {
  position:fixed;
  background: white;
  width: 80%;
  height: auto;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

这将产生一个带有白色框轮廓和阴影背景的居中模式。 完成您的 Modal 组件后，让我们将您的组件集成到您的 Dashboard 中。

第 3 步 — 合并 Modal 组件

要将 Modal 合并到 Dashboard 中，请导航到 Dashboard.js 文件并在 React 实例下方导入 Modal 组件：

仪表板.js

import React, { Component } from "react";
import Modal from './Modal.js';

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <Modal show={this.state.show} handleClose={this.hideModal}>
          <p>Modal</p>
        </Modal>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

在您的 return() 语句中，包含您的 Modal 组件以显示和隐藏模式。 属性 show 和 handleClose 是来自 Modal 组件的属性，用于管理状态逻辑和 hideModal() 函数。

您的 Dashboard 和 Modal 组件现在将在您的浏览器上呈现：

观察您的新 Modal 组件现在如何打开和关闭。

结论

在本教程中，您了解了如何通过将道具和功能从一个组件传递到另一个组件来使用 React 来实现模式。

要实时查看这个项目，这里是这个项目的 CodePen 演示。