Bootstrap 在 React 应用程序中不起作用以及如何在组件中导入 bootstrap.js 文件？答案

【问题标题】：Bootstrap is not working in react app and how to import bootstrap.js file in a component?Bootstrap 在 React 应用程序中不起作用以及如何在组件中导入 bootstrap.js 文件？
【发布时间】：2019-08-06 12:00:17
【问题描述】：

任何人都对如何克服样式和 bootstrapjs 和 css 文件在 react 应用程序中不起作用以及如何在 react 组件中导入 bootstrapjs 文件的问题提出建议。

我创建了一个带引导程序的切换导航栏，但使用弹出窗口和引导程序文件不起作用

import React from 'react';
import SwiperDiv from './swiper';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="App">
      <SwiperDiv/>
    </div>
  );
}

export default App;

index.js:1375 警告：React 无法识别 DOM 元素上的 classNmae 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 classnmae。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

【问题讨论】：

请附上swiper文件的代码
visual studio 代码没有从节点模块中选择 css (bootstrap.min.css)
我给出了正确的路径 Visual Studio 代码 sugeest 路径'bootstrap/dist/css' 它不会显示实际文件 bootstrap.min.css
我自己写的，但是没有用
控制台没有出错，样式也没有应用。

标签： reactjs twitter-bootstrap swiper

【解决方案1】：

你的 DOM 元素可能有错字

类名

试试类名

【讨论】：

【解决方案2】：

根据您的错误消息，我猜测您的代码中某处（可能是 ./swiper）您写的是 classNmae 而不是 className，这就是导致您的问题的原因。

此外，在您发布的代码中，您在 return 语句中关闭了一个 div 标记，而没有出现它的开始标记，因此它肯定会引发错误。你应该这样做：

return (
  <div>
    <SwiperDiv/>
  </div>
)

【讨论】：

【解决方案3】：

添加引导程序链接和脚本

如果您使用 create-react-app 创建了 react APP，则在根目录“public/index.html”中

【讨论】：

我已经做到了。控制台出现以下错误
localhost/:1 无法在资源“localhost:3000/src/bootstrap-4.3.1-dist/css/bootstrap.min.css”的“完整性”属性中找到有效的摘要，计算出的 SHA-256 完整性为“MsZC0igy9jcwulUMrBEeC4p8pFcxxGDzjPy6s3lO5as=”。该资源已被阻止。