启动 jquery 函数的 componentDidMount() 问题 - React

Question

我正在开发 ReactJS 应用程序。在我使用 React Router Dom 切换路径后，我的 $(document).ready(function(){}); 停止工作。我搜索了 google 以找到解决此问题的方法。我找到这篇文章：

React-router : How to trigger $(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 is not a function

raw javascript 的脚本是：<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script> 谢谢☺

Answer 1

我不推荐 jquery 反应。出于任何原因，如果您想使用它。您需要将所有这些文件导入 public 文件夹下的 index.html 位置：

<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

Answer 2

这是一个简短的演练，介绍如何安装和使用 bootstrap 或 material-design 与 React，而不需要 jQuery。

Bootstrap is planning to move away from jQuery in version 5 so it is important to choose libraries that will not depend on jQuery, unless you are certain that this your want to maintain that leg of your code base (but as other commenters have noted, including jQuery within React is not necessary and in fact, vanilla Javascript can be just as functional).

首先，您需要决定是否需要 bootstrap 或 material 设计，或两者兼而有之。我将继续假设您只需要 bootstrap 组件，在这种情况下，下面的所有代码都适用（为了介绍，see here). Otherwise, you'll need to follow the material design instructions, see here.

继续安装：

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'。我已经调整了您的路由器配置，以获得基本的 new-to-react 设置。

现在假设您的 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 Whosebug!</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

启动 jquery 函数的 componentDidMount() 问题 - React

componentDidMount() issue with starting jquery function - React

javascript

jquery

document-ready

reactjs

react-router