componentDidMount()问题与启动jquery函数React有关

Question

我正在开发ReactJS应用程序。我的$(document(.ready(function((｛｝(在我用React Router Dom切换路径后停止工作。我在谷歌上搜索了这个问题的解决方案。我发现这篇文章：

React路由器：如何触发$(document(.ready((？

我使用了这个问题答案中的代码。你可以在这里看到我的代码：

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import $ from 'jquery';
import MainRouter from './MainRouter';
class App extends Component {
componentDidMount() {
let bootstrapMaterialDesign = $.fn.bootstrapMaterialDesign;
$('body').bootstrapMaterialDesign({});
};
render() {
return (
<BrowserRouter>
<MainRouter />
</BrowserRouter>
)
}
};
export default App;

此代码不起作用。我不知道为什么。在这里你可以看到React错误：

TypeError:jquery__WEBPACK_IMPORTED_MODULE_2____default(…((…(.bootstrapMaterialDesign不是函数

原始javascript的脚本为：<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>非常感谢。☺

Answer 1

以下是关于如何在不需要jQuery的情况下安装和使用React的引导程序或材料设计的简短演练。

Bootstrap计划在版本5中放弃jQuery，因此选择不依赖jQuery的库是很重要的，除非你确信这是你想要维护代码库的那一部分(但正如其他评论者所指出的，在React中包含jQuery是不必要的，事实上，普通的Javascript也可以同样有效(。

---

首先，您需要决定是需要引导还是材料设计，或者两者兼而有之。我将假设您只需要引导程序组件，在这种情况下，下面的所有代码都适用得很好(有关介绍，请参阅此处(。否则，您需要遵循材料设计说明，请参阅此处。

继续安装：

cd path/to/root/react/folder
npm install bootstrap react-bootstrap

在同一个文件夹中，运行npm start，让我们开始编辑您的文件。

---

在app.js文件中，更改如下：

import React from 'react';
import { Router, Switch, Route } from 'react-router-dom';
import Main from './Main.js';
const App () => {
// Any hooks or other functions needed for rendering router stuff, put it here
render {
return (
<Router>
<Switch>
<Route path="/" component={Main.js} />
</Switch>
</Router>
)
}
};
export default App;

请注意，这使用的是函数式编程，而不是类。因此不需要"didComponentMount"。我已经调整了你的路由器配置，为一个基本的，新的反应设置。

---

现在假设您的Main.js文件有一个基本的路由器设置，按如下方式设置：

import React from "react";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function Main() {
return (
<div>
<h1>Hello StackOverflow!</h1>
<h2>Start editing to see some magic happen!</h2>
<Button className="btn btn-primary">Here's a button!</Button>
</div>
);
}

此处的CodeSandbox示例：https://codesandbox.io/s/react-simple-bootstrap-example-xydjx?file=/src/App.js

Answer 2

我不建议在react中使用jquery。无论出于何种原因，如果你想使用它。你需要将所有这些文件导入index.html中public文件夹下的位置：

<link
rel="stylesheet"
href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX"
crossorigin="anonymous"
/>
<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://unpkg.com/popper.js@1.12.6/dist/umd/popper.js"
integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js"
integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9"
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$("body").bootstrapMaterialDesign();
});
</script>

以下是React中的演示：https://codesandbox.io/s/staging-frost-6r6vj?file=/public/index.html:571-1620