如何从 React Bootstrap 导入组件

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

介绍 ReactBootstrap是React中广泛使用的库之一，其各种组件用于React应用程序，使其适合移动设备。它拥有大量组件，为应用程序提供布局、表单控件、信息指示器和导航组件的

介绍

React Bootstrap 是 React 中广泛使用的库之一，其各种组件用于 React 应用程序，使其适合移动设备。它拥有大量组件，为应用程序提供布局、表单控件、信息指示器和导航组件的各种细节。

在本指南中，您将学习如何通过在 React 组件中导入和使用 React Bootstrap 组件将 React Bootstrap 添加到 React 应用程序中。

将 React Bootstrap 添加到 React 应用中

使用以下npm命令安装 React Bootstrap 库。

      npm install react-bootstrap bootstrap

安装上述两个库后，下一步是将 bootstrap CSS 文件添加到index.js或app.js中，如下所示：

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

或者，如果您在应用程序中使用 SASS，则可以按如下所示添加它。

应用程序.scss

      @import "~bootstrap/scss/bootstrap";

App.js

      import './App.scss';

现在您已准备就绪，可以通过将各种组件导入 React 应用程序来进一步使用 React Bootstrap。

从 React Bootstrap 导入组件

现在您已经安装了 bootstrap 库并将 CSS 文件配置到您的应用程序中，现在是时候从react-bootstrap导入组件了。

从react-bootstrap导入任何内容的基本语法如下：

      import { COMPONENT_NAME } from 'react-bootstrap';
    

或者：

      import COMPONENT_NAME from 'react-bootstrap/COMPONENT_NAME';
    

它是用于从库中导入特定组件的基本语法，但您仍然可以使用将在本指南下一部分中学习的其他方式导入它。

从 React Bootstrap 库导入组件

导入单个组件

您可以按照下面的说明从react-bootstrap导入任何单个组件。

      import React, { Component } from "react";
import { Image } from "react-bootstrap";

class SingleComponent extends Component {
  render() {
    return (
      <div>
        <Image
          src="https://dummyimage.com/170x180/000/fff.png&text=TEST123"
          thumbnail
        />
      </div>
    );
  }
}

export default SingleComponent;
    

在上面的例子中，要从react-bootstrap库导入名为Image 的单个组件，使用的命令是：

      import { Image } from "react-bootstrap";
    

在render()函数内部，<Image/>组件与各种属性（如href）以及另一个名为thumbnail的支持属性一起使用。

你可以这样从 React Bootstrap 导入任何单个组件：

单独导入单个组件

您可以从react-bootstrap单独导入和使用任何 React Bootstrap 组件，而不是从完整的库中导入它们，如下所示。

      import React, { Component } from "react";
import Breadcrumb from "react-bootstrap/Breadcrumb";

class SingleIndividualComp extends Component {
  render() {
    return (
      <Breadcrumb>
        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="#">Profile</Breadcrumb.Item>
        <Breadcrumb.Item active>Test123</Breadcrumb.Item>
      </Breadcrumb>
    );
  }
}

export default SingleIndividualComp;
    

如上例所示，使用以下命令单独导入Breadcrumb ：

      import Breadcrumb from "react-bootstrap/Breadcrumb";
    

从库中提取特定组件而不是选择整个包可以提高获取和渲染特定组件时的性能。

使用 React Bootstrap 默认语法

默认语法是一种动态使用 React Bootstrap 的方式，无需命名特定的组件，就像以前一样。

      import React, { Component } from "react";
import * as ReactBootstrap from "react-bootstrap";

class DynamicImport extends Component {
  render() {
    return (
      <ReactBootstrap.Button bsStyle="success" bsSize="small">
        Something
      </ReactBootstrap.Button>
    );
  }
}

export default DynamicImport;
    

上面的例子没有按名称导入任何组件，而是使用动态导入格式在需要时获取特定组件，如下所示。

      import * as ReactBootstrap from "react-bootstrap";
    

当你在开发 UI 时需要任何组件时，你必须使用前缀ReactBoootstrap.comp_name后跟特定的组件名称，这使得它更容易使用。

导入多个组件

到目前为止，在本指南中，您已经学习了如何导入单个特定组件，但您也可以从单个导入语句导入多个组件。

下面是一个简单的示例，展示了如何通过单个导入语句从react-bootstrap导入多个组件。

      import React, { Component } from "react";
import { Form, Col, Button } from "react-bootstrap";

class MultipleImport extends Component {
  render() {
    return (
      <Form>
        <Form.Row>
          <Col>
            <Form.Control placeholder="First name..." />
          </Col>
          <Col>
            <Form.Control placeholder="Last name..." />
          </Col>
          <Col>
            <Button>Submit</Button>
          </Col>
        </Form.Row>
      </Form>
    );
  }
}

export default MultipleImport;
    

在上面的例子中，从单个 import 语句导入了三个组件： Form、Col和Button 。

      import { Form, Col, Button } from "react-bootstrap";
    

它有时非常方便，因为您不需要使用多个 import 语句同时从同一个库导入单个组件。

结论

在本指南中，您了解了导入组件的各种方法，例如使用单个导入语句导入单个组件、个别组件、动态组件和多个组件。

您可以选择其中任何一种方法，但就性能而言，多个组件导入语句或单个组件导入比其他方法要好得多。我希望本指南能帮助您尝试导入各种组件。本指南就是这些；注意安全，继续编码。

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

_查看原文

技术指南

React框架

阅读全文

如何从 React Bootstrap 导入组件

杭州电子商务研究院

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

import React, { Component } from "react"; import { Image } from "react-bootstrap"; class SingleComponent extends Component { render() { return ( <div> <Image src="https://dummyimage.com/170x180/000/fff.png&text=TEST123" thumbnail /> </div> ); } } export default SingleComponent;

import React, { Component } from "react"; import Breadcrumb from "react-bootstrap/Breadcrumb"; class SingleIndividualComp extends Component { render() { return ( <Breadcrumb> <Breadcrumb.Item href="#">Home</Breadcrumb.Item> <Breadcrumb.Item href="#">Profile</Breadcrumb.Item> <Breadcrumb.Item active>Test123</Breadcrumb.Item> </Breadcrumb> ); } } export default SingleIndividualComp;

import React, { Component } from "react"; import * as ReactBootstrap from "react-bootstrap"; class DynamicImport extends Component { render() { return ( <ReactBootstrap.Button bsStyle="success" bsSize="small"> Something </ReactBootstrap.Button> ); } } export default DynamicImport;

import React, { Component } from "react"; import { Form, Col, Button } from "react-bootstrap"; class MultipleImport extends Component { render() { return ( <Form> <Form.Row> <Col> <Form.Control placeholder="First name..." /> </Col> <Col> <Form.Control placeholder="Last name..." /> </Col> <Col> <Button>Submit</Button> </Col> </Form.Row> </Form> ); } } export default MultipleImport;