你之前可能遇到过模态。它们看起来像弹出窗口，并在你单击特定按钮或执行其他操作后出现。你也可以在自己的 React 应用程序中使用它们。

如果使用得当，模态可以改善 React 应用程序的用户体验。

它们对于吸引用户注意网站的基本功能或获取他们的意见非常有效。例如，如果你的用户不小心点击删除了一个重要的 UI 项目，你可以使用模式询问他们是否确定他们的选择。

在开发 React 应用程序时，你可以使用常规 JavaScript、HTML 和 CSS 创建自定义 Modal 组件。但是，除非你确定需要自定义解决方案，否则你可以通过使用来自 UI 库（如 Bootstrap）的模态来节省大量时间。

React 中的 Bootstrap 3 模态

React-Bootstrap 是一个为 React 调整的流行库版本。它提供了与原始 Bootstrap 版本 3 具有相同功能和特性的自定义 React 组件。

使用像 React-Bootstrap 这样的库可以让你使用常见的 UI 元素，而无需从头开始编写它们。

从该库中导入的 Modal 组件提供了你可能需要的所有功能。一旦你导入了它，你就不再需要违背 React 的模式并直接改变 DOM。

你可以通过打开 shell 并键入以下命令来安装它：

npm install react-bootstrap

react-bootstrap 库最好的部分是它可以单独导入单个组件。这样，你可以最小化包大小并使你的应用加载速度更快。

从 React-Bootstrap 库中包含模式的最简单方法是在应用程序的顶部声明一个导入语句：

import Modal from 'react-bootstrap/Modal';

React-Bootstrap 库的唯一缺点是它只支持 Bootstrap 3。

React-Bootstrap 库让你可以自由地自定义 Modal 组件的外观和功能。你可以调整其动画、浏览器中的位置和大小，仅举几例。通过阅读官方指南了解有关 React-Bootstrap 模态的更多信息。

React 中的 Bootstrap 4 和 5 模态

如果你希望使用 Bootstrap 4 或更新的版本 5，最好的选择是使用 react-strap 包。由于这个包没有它的样式，你必须安装核心 bootstrap 包并导入它的 CSS 文件。

要安装 react-strap 包，你必须打开命令行并输入以下代码：

npm install reactstrap

安装完成后，你可以将 Modal 组件导入到你的应用程序中。下面是一个例子：

import React from 'react';
import { Modal } from 'reactstrap';

Modal 组件是专门为 React 构建的。你可以使用 isOpen、toggle 和 size 等 props 自定义其行为。你甚至可以选择启用或禁用淡入淡出动画。

react-strap 包为你提供了很大的自由来自定义其组件的行为。要了解有关你可以使用的选项的更多信息，请查看官方 react-strap 文档。

火焰兔

海报 链接

你可能没有意识到，但图标和徽标是现代应用程序的重要组成部分。在 React 中构建界面时，开发人员可以使用许多不同的工具包和包含图标的包。FontAwesome 是最好的选择之一，因为它提供了各种各样的图标。FontAwesome 背后的团队也努力将图标集成到 React 生态系统中。

在 React 中使用 FontAwesome

为 React 选择一个 FontAwesome 图标

一旦你确定了你的应用程序需要什么类型的图标，你可以在 Font Awesome Icons 页面上搜索相关的关键字来找到合适的东西。你在左侧看到的过滤器对于缩小选择范围至关重要。他们可以帮助你找到你正在寻找的确切内容，更重要的是，告诉你需要安装哪个 FontAwesome 包。

要安装常规图标，请在命令行中执行以下命令：

npm install --save @fortawesome/free-regular-svg-icons

要探索你可以安装的所有不同软件包，请查看本指南。

创建库

随着应用程序的增长，你将需要许多不同文件中的图标。一遍又一遍地导入相同的图标可能会让人筋疲力尽。相反，你可以在一个 JavaScript 文件中导入你需要的每个图标，你将在其中创建一个 FA 库。

通常将你的图标库存储在 src 文件夹中。该库应包含整个 React 应用程序中使用的所有图标。完成后，将库导入父组件（通常是 App.js），以便所有子组件都可以访问它。

这是一个简单的图标库的样子：

import { library } from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import { faCoffee, faCheckSquare  } from '@fortawesome/pro-solid-svg-icons';
library.add(
  faCoffee,
  faCheckSquare,
);

使用 <FontAwesomeIcon/>

react-fontawesome 包包含一个 <FontAwesomeIcon /> 自定义组件，该组件明确创建以在 React 应用程序中使用 FA 图标。单独的组件方法可以为你提供性能提升并最小化整个包的大小。

要使用 <FontAwesomeIcon/> 组件，你必须安装 react-fontawesome 包。你还需要导入特定的图标。例如，如果你要使用 Twitter 徽标，则需要导入 faTwitter 图标。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
class App extends Component {
  render() {
    return <FontAwesomeIcon icon={ faTwitter }/>
  }
}

icon 属性是最重要的，但其他属性可以帮助你自定义图标。

size 属性接受许多不同的值 – sm 代表小号，md 代表中号，lg 代表大号，而 xl 代表超大号。它还接受数字值，这可以帮助你相对于其标准大小缩放图标。你可以使用 2x 和 6x 值之间的数值来相应地放大图标。你还可以使用十进制值。你还可以使用内联样式来更改 <FontAwesomeIcon /> 组件的外观。

使用 className

如果你正在使用 create-react-app CLI 开发 React 应用程序，你可以使用 className 属性来显示图标。如果你来自其他框架或语言，这很可能是你习惯使用 FontAwesome 的方式。

不要忘记，在 JSX 语法中，你必须使用 className 属性，就像常规 DOM 一样。这是必要的，因为 JavaScript 中的 class 是一个保留字。

一旦你安装了 font-awesome 库，你必须将它导入到 index.js 文件中。该文件必须包括：

import 'font-awesome/css/font-awesome.min.css';

导入图标样式后，你可以在 JSX 中使用常规的 className 语法：

 render: function() {
    return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}

火焰兔

海报 链接