如何在 react.js 的一个组件中导入引导程序答案

【问题标题】：How to import bootsrap in just one component in react.js如何在 react.js 的一个组件中导入引导程序
【发布时间】：2020-04-04 08:35:17
【问题描述】：

实际上我正在“迁移”一个我使用模板的网站项目。当我将引导链接放在 index.html 中时，会出现一些冲突。我想将引导程序应用到一个组件中以避免这种冲突，但我不知道该怎么做。我对 react 很陌生。

“冲突”只是视觉上的，例如导入引导程序会更改行数和列数

【问题讨论】：

标签： reactjs components react-bootstrap

【解决方案1】：

您可以使用reactstrap，将您需要的内容导入到您的组件文件中，其他的不用管。

例子：

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

使用：

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

如果您不希望在您的 app.js 或站点范围内使用 Bootstraps CSS，您可以将其导入该特定组件。

【讨论】：

【解决方案2】：

不幸的是，CSS 始终是全局的，所以没有简单的方法来做到这一点。

然而，一种方法是重新编译 Bootstrap 并将其包装在包装类中。然后，在您的代码中，在包装器组件上设置包装器类，并且只有该包装器组件内部的类才会受到引导类的影响。

步骤：（你需要 npm 来做）

下载引导源here
解压，进入./scss/bootstrap.scss
在所有 @import 上添加一个包装 css 类，如下所示：

.local-bootstrap {
  @import "function";
  @import "variables";

  /* ... */

  @import "print";
}

回到解压目录的根目录
运行npm install 和npm run css-compile
您的本地引导程序位于 ./dist/css/bootstrap.css 中，您可以将其添加到项目中

然后在你的代码中：

 <div class="local-bootstrap"> /* wrapper component */
   /* inside, the code is affected by your local bootstrap */
   <div class="alert alert-primary" role="alert"/>
 </div>

 /* outside it is not */
 <div>
 </div>

也就是说，很确定 bootstrap 的 javascript 部分不能完全工作，因为它依赖于类，无论如何这有点 hacky。

【讨论】：