从哪里导入React-Bootstrap组件？

Question

我使用的是React-Bootstrap版本的1.0.0-beta.10。

每当我想要使用一个组件时，例如Alert，我都会从集成开发环境中获得三个导入选项供选择：

"react-bootstrap"
"react-bootstrap/Alert"
"react-bootstrap/es/Alert"

我应该使用它们中的哪一个?为什么？

Answer 1

是。我们有多个导入组件的选项。

直接从react-bootstrap导入时，需要导入为

import {Alert} from `react-bootstrap`;

因为以Alert named export**.**格式导出了Alert组件，所以使用

如果从node_modules文件夹展开react-bootstrap文件夹，您将看到多个文件夹和文件。

react-bootstrap文件夹中直接可用的文件是基于ES5的。

当我说基于ES5方法时，这个组件所需的包是这样导入的。

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

并且您可以将组件导入为

import Alert from `react-bootstrap/Alert`;

因为以Alert default export**.**格式导出了Alert组件，所以使用

es文件夹中的可用文件基于ES6。

当我说基于ES6方法时，这个组件所需的包是这样导入的。

import _extends from "@babel/runtime/helpers/esm/extends";

并且您可以将组件导入为

import Alert from `react-bootstrap/es/Alert`;

因为以Alert default export**.**格式导出了Alert组件，所以使用

Answer 2

你必须改变你的代码库。

react-bootstrap没有默认的导出，所以在这种情况下不能使用默认的导入语法。

不过，您可以执行以下操作：

import * as ReactBootstrap from 'react-bootstrap';

然后，您可以使用Alert组件。