我安装了一个基本的react 应用程序

npx create-react-app appnamehere

然后我安装了Bootstrap(也try 了v4和v5)

npm install bootstrap

然后把它们装到我的App.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min";

css可以工作,但js组件,如alert 、折叠等不能工作.我想这是因为js个文件没有导入到我的项目中--这很奇怪,因为我确实导入了它们.我try 了CDN方法,用下面的代码更改了index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>MyApp</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
 

你猜怎么着,一样的事.CSS件像魅力一样的作品,JS件东西不起作用.有什么主意吗?

推荐答案

如果您想将其与REACT一起使用,我建议使用REACTION-BOOTSTRAP. https://react-bootstrap.netlify.app/

npm install react-bootstrap bootstrap

你可以查阅他们的文档,了解如何使用它.这就像导入零部件一样.

Javascript相关问答推荐

React存档iframe点击行为

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%,而无需父母有明确的/固定的宽度和高度,替代方法吗?

Phaser 3 console. log()特定游戏角色的瓷砖属性

将自定义排序应用于角形数字数组

Angular material 拖放堆叠的牌副,悬停时自动展开&

如何从一个列表中创建一个2列的表?

是什么导致了这种奇怪的水平间距错误(?)当通过JavaScript将列表项元素追加到无序列表时,是否在按钮之间?

对路由DOM嵌套路由作出react

如何将数据块添加到d3力有向图中?

类构造函数忽略Reaction Native中的可选字段,但在浏览器中按预期工作

使用auth.js保护API路由的Next.JS,FETCH()不起作用

AddEventListner,按键事件不工作

react -原生向量-图标笔划宽度

postman 预请求中的hmac/sha256内标识-从js示例转换

用Reaction-RT-Chart创建实时条形图

如何在Highlihte.js代码区旁边添加行号?

如何设置时间选取器的起始值,仅当它获得焦点时?

Rails 7:在不使用导入映射的情况下导入Java脚本

正在发出错误的URL请求

如何为Reaction应用程序创建仅登录的路由?