如何在 React.js 中使用 Bootstrap 组件

2020-05-28 08:00:00 · 飞浪

介绍 React支持大量框架和库，这使得开发人员能够用最少的代码构建引人入胜的UI，并集成外部API以实现复杂的功能。Bootstrap是最流行的CSS框架，被众多企业用于单页应用程序，

介绍

React 支持大量框架和库，这使得开发人员能够用最少的代码构建引人入胜的 UI，并集成外部 API 以实现复杂的功能。Bootstrap 是最流行的 CSS 框架，被众多企业用于单页应用程序，并且在 React 中易于使用。本指南主要探讨了如何通过两种方式将 Bootstrap 组件与 Reactjs 结合使用：直接使用原生 bootstrap 组件和使用其基于组件的库React Bootstrap。

Bootstrap 组件

Bootstrap 提供了多种可用于标记模板的组件，可在整个应用中提供无缝的用户体验。其中包括：

活动反馈的提醒和提示
用于显示附加信息的模态框、工具提示、可折叠框和弹出框
表单、下拉菜单、输入组和选择处理用户表单
按钮、进度和旋转器可增强应用程序的视觉效果
列表、分页和面包屑导航，用于以可呈现的格式显示大量内容
徽章、卡片、旋转木马和巨型电子屏幕，打造美观的用户界面

本指南更加注重实现模式，因此相同的知识可以扩展到 React 中的任何 Bootstrap 组件。

将 Native Bootstrap 与 React 结合使用

首先创建一个空项目。

确保您的机器上安装了 Nodejs 和 npm（至少版本 8 或更高版本）以及代码编辑器和 Web 浏览器（最好是 Chrome 或 Firefox）。

使用 create-react-app 创建一个新项目：

      npx create-react-app bootstrap-react

清理模板

从App.js中删除徽标、App.css 及其所有导入。清除 App 组件内的入门模板。你的App.js应该如下所示：

      import React from 'react';

function App() {
  return (
    <div className="App">
      <h2>Hello</h2>
    </div>
  );
}

export default App;
    

设置 Bootstrap

首先，您需要获取 Bootstrap 样式。转到公共文件夹内的index.html文件并在其中添加以下 CDN：

      ... 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
...
    

现在，所有 Bootstrap 样式类都可以与 JSX 元素一起使用了。添加以下脚本标签以启用组件的 JavaScript。

      ...
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
...
    

为了确保在加载这些脚本之前加载 HTML 主体，请将它们放在index.html 的结束位置正上方。

使用警报、按钮和表单组件

要使用 Bootstrap 的表单组件创建一个简单的表单，请在App.js中添加以下代码。

      import React from 'react';

function App() {  
  return (
    <div className="App">
      <div className="container">
        <form >
            <label>Name: </label> 
            <input type = "text" className="form-control"/> 
            <input type = "submit"
            value = "Submit" className="btn btn-primary"/>
        </form> 
      </div>
    </div>
  );
}

export default App;
    

这将在页面上呈现带有输入字段和按钮的表单。只需在 JSX 模板中写下它们的标记即可使用这些组件。但是，要以事件驱动格式获取这些组件，您的父组件应该通过状态与它们进行交互。

导入useState钩子并创建一个状态变量来跟踪此表单提交时触发的警报。将其初始设置为 false。

      import React,{useState} from 'react';

function App() {
  let [alert,setAlert]=useState(false);
  ...
 }
    

添加一个提交事件，当表单提交时触发，将警报的值设置为 true。

      import React,{useState} from 'react';

function App() {
  let [alert,setAlert]=useState(false);

  const handleSubmit=(e)=>{
    e.preventDefault();
    setAlert(true);
  }
  
  return (
    <div className="App">
      <div className="container">
        <form onSubmit = {handleSubmit} >
        ...
   )
 }
    

最后，有条件地将 Bootstrap 警报组件作为 JSX 元素输出。

      ...
    {alert && <div class="alert alert-success alert-dismissible fade show" role="alert">
              <strong>Congrats!</strong> Your details have been submitted successfully
              <button type="button" class="close" data-dismiss="alert" aria-label="Close" 
              onClick={()=>{setAlert(false)}}>
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
     }
 ...
    

请注意，您需要在警报关闭后将其值重新设置为 false，以便状态变量与警报事件保持一致。关闭按钮上的内联函数可完成此工作。

测试

在根目录中，运行以下命令。

      npm start

这将启动本地开发服务器（通常在端口 3000 上），您可以在页面上看到表单以及按钮。单击提交按钮，页面上会出现一条包含成功消息的警报。您可以关闭警报并通过提交按钮再次触发它。

原生 Bootstrap 的缺点

使用原生 bootstrap 似乎简单方便，但也存在一些缺点。这些包括：

JSX 太长，降低了可读性
模块化程度较低，调试困难
自定义组件可能需要外部 JavaScript 或 JQuery
升级到新版本需要手动更新所有 CDN 并检查代码中是否存在已弃用的类和元素
缺乏组件架构

使用 React Bootstrap

解决上述问题的一种方法是使用 React Bootstrap，这是一个基于组件的库，其中的所有内容本质上都是 React 组件，可以作为输出它的组件内的子组件进行呈现。

设置

您可以按照前面的步骤（直到“设置 Bootstrap”部分）创建一个新的 CRA 项目，也可以通过撤消所有内容（回到“设置 Bootstrap”部分）来清除之前的模板。干净且空的 App.js 已准备就绪。

安装 React Bootstrap

在根目录中，运行以下命令来安装 React Bootstrap 库。

      npm install react-bootstrap bootstrap

这将在项目内安装 Bootstrap 和 React Bootstrap。

使用下拉列表组件

为了使常规 Bootstrap 样式正常工作，请在顶部导入 Bootstrap 样式。每次使用 React Bootstrap 组件时都需要执行此操作。

      import 'bootstrap/dist/css/bootstrap.min.css';

以上相当于在index.html文件中添加 Bootstrap CDN。现在从react-bootstrap导入DropdownButton和Dropdown。无论您使用什么组件，此步骤都是常见的，但请确保您导入了正确且仅需要的组件。

      import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown'
    

将它们渲染到App.js内的 DOM 上。

      import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import DropdownButton from 'react-bootstrap/DropdownButton';        
import Dropdown from 'react-bootstrap/Dropdown'

function App() { 
  return (
    <div className="App container">
      <DropdownButton
      alignRight
      title="Dropdown right"
      id="dropdown-menu-align-right"
      >
              <Dropdown.Item eventKey="option-1">option-1</Dropdown.Item>
              <Dropdown.Item eventKey="option-2">option-2</Dropdown.Item>
              <Dropdown.Item eventKey="option-3">option 3</Dropdown.Item>
              <Dropdown.Divider />
              <Dropdown.Item eventKey="some link">some link</Dropdown.Item>
      </DropdownButton>
    </div>
  );
}

export default App;
    

您可以看到您的下拉列表组件已渲染为项目列表。让我们看另一个示例。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React.js 中使用 Bootstrap 组件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> ...

... <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> ...

import React from 'react'; function App() { return ( <div className="App"> <div className="container"> <form > <label>Name: </label> <input type = "text" className="form-control"/> <input type = "submit" value = "Submit" className="btn btn-primary"/> </form> </div> </div> ); } export default App;

import React,{useState} from 'react'; function App() { let [alert,setAlert]=useState(false); const handleSubmit=(e)=>{ e.preventDefault(); setAlert(true); } return ( <div className="App"> <div className="container"> <form onSubmit = {handleSubmit} > ... ) }

... {alert && <div class="alert alert-success alert-dismissible fade show" role="alert"> <strong>Congrats!</strong> Your details have been submitted successfully <button type="button" class="close" data-dismiss="alert" aria-label="Close" onClick={()=>{setAlert(false)}}> <span aria-hidden="true">×</span> </button> </div> } ...

import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown' function App() { return ( <div className="App container"> <DropdownButton alignRight title="Dropdown right" id="dropdown-menu-align-right" > <Dropdown.Item eventKey="option-1">option-1</Dropdown.Item> <Dropdown.Item eventKey="option-2">option-2</Dropdown.Item> <Dropdown.Item eventKey="option-3">option 3</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item eventKey="some link">some link</Dropdown.Item> </DropdownButton> </div> ); } export default App;