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

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