添加引导 js 以响应应用程序 - Reactjs答案

【问题标题】：Adding bootstrap js to react apps - Reactjs添加引导 js 以响应应用程序 - Reactjs
【发布时间】：2017-09-27 08:37:16
【问题描述】：

我正在尝试在我的反应应用程序中实现引导模式。 Bootstrap.css 工作得很好，但是当我尝试添加 $("#thismodal").modal('show) 时，它给了我错误：

Uncaught TypeError: (0 , _jquery2.default)(...).modal 不是功能

我已经搜索了谷歌和 Stackoverflow，并得到了一些答案，但仍然无法正常工作。

我已经在我的组件中添加了：

import 'somefolder/jquery';
import 'somefolder/bootstrap';

不工作

在我的 index.html 文件中添加：

<body>
    <div id="root"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.js"></script>
  </body>

效果不好

那么，我该怎么办？我明白不推荐使用 jquery 和 react。由于某种原因，我不能使用 React-Bootstrap。

【问题讨论】：

你为什么不试试react-bootstrap.github.io
在dom加载完成后你应该调用jquery代码，请检查并告诉我们
我在componentDidMount中调用它。所以 DOM 已经在加载了。
imo 你不需要导入 jquery。只需在您做出反应之前在您的脚本上添加 jquery，您的窗口上应该有 jQuery or $ 变量。

标签： javascript jquery twitter-bootstrap reactjs

【解决方案1】：

从一个问题开始，因为如果我没记错的话，我也有这个错误。就这样吧。

你是否在你的 react 应用中声明了 jquery？

declare var $ : any;

另外，id 避免使用引导程序自己的模态有很多原因，但最大的一个原因是更好地控制它。 React 有一个叫做 portals 的东西，它可以让你将一个组件连接到 html 正文中的选择标签（比如你的应用程序在 id="root" 处呈现，你可以使用标签 id="modal" 创建一个新的 div 并将其连接起来那里）。

一旦您回答了我的问题，我可能会更好地理解您的问题（除非这实际上解决了您的问题 :)）。

干杯！

【讨论】：