从哪里导入React-Bootstrap组件？

Question

我正在使用React-Bootstrap版本1.0.0-beta.10 。

每当我想使用组件（例如Alert ，我将从IDE中获得三个导入选项供您选择：

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

我应该使用其中的哪个？为什么？

Answer 1

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

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

import {Alert} from `react-bootstrap`;

因为Alert组件被导出为named export 。

---

如果从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 。

---

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

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

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

您可以将组件导入为

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

因为Alert组件已导出为default export 。

Answer 2

您必须更改您的代码库。

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

您可以执行以下操作：

import * as ReactBootstrap from 'react-bootstrap';

然后，您可以使用警报组件。