介绍

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

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

先决条件

要完成本教程，您需要：

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

第 1 步 – 启动Dashboard组件

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

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

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

注意：请记住在constructor()using.bind()方法上绑定您的函数。

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

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接受阵营JSX属性onClick应用.showModal()功能，并打开模式。您将Dashboard组件导出到App连接到根 HTML 文件的高阶组件。

第 2 步 – 构建Modal组件

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

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 JSXonClick属性的按钮，该属性接受该hideModal()方法，此处表示为参数handleClose，作为道具传递到您的Dashboard组件中。

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

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

.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文件并Modal在 React 实例化下方导入您的组件：

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组件现在如何打开和关闭。

结论

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

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