从哪里导入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。

---

如果从react-bootstrap文件夹中展开node_modules文件夹，则会看到多个文件夹和文件。

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';

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