Problema componentDidMount () con l'avvio della funzione jquery - React

Sep 12 2020

Sto lavorando all'applicazione ReactJS. Il mio $ (documento) .ready (function () {}); smettere di funzionare dopo aver cambiato percorso con React Router Dom. Ho cercato su Google per trovare una soluzione a questo problema. Trovo questo articolo:

React-router: come attivare $ (document) .ready ()?

Ho usato il codice dalla risposta a questa domanda. Puoi vedere il mio codice qui:

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;

Questo codice non ha funzionato. Non so perché Qui puoi vedere l'errore React:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_2 ___ default (...) (...). BootstrapMaterialDesign non è una funzione

Lo script per javascript non elaborato è: <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>Grazie ☺

Risposte

1 HarleyLang Sep 12 2020 at 00:15

Ecco una breve guida su come installare e utilizzare bootstrap o material-design con React, senza bisogno di jQuery.

Bootstrap sta pianificando di allontanarsi da jQuery nella versione 5, quindi è importante scegliere librerie che non dipenderanno da jQuery, a meno che tu non sia certo di voler mantenere quella parte della tua base di codice (ma come hanno notato altri commentatori, incluso jQuery all'interno di React non è necessario e in effetti, Javascript vaniglia può essere altrettanto funzionale ).

Innanzitutto, dovrai decidere se hai bisogno di bootstrap o material design, o entrambi. Procederò assumendo che tu voglia solo componenti bootstrap, nel qual caso tutto il codice sotto si applica bene (per un'introduzione, vedi qui ). Altrimenti, dovrai seguire le istruzioni per la progettazione del materiale, vedi qui .

Avanti con l'installazione:

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

Dalla stessa cartella, esegui npm starte iniziamo a modificare i tuoi file.

Nel tuo file app.js, modifica come segue:

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;

Si noti che questo utilizza la programmazione funzionale, non le classi. Quindi non c'è bisogno di "didComponentMount". E ho regolato le configurazioni del tuo router per una configurazione di base, nuova per reagire.

Ora supponendo che il tuo file Main.js abbia una configurazione di base del router, configuralo come segue:

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>
  );
}

Esempio di CodeSandbox qui: https://codesandbox.io/s/react-simple-bootstrap-example-xydjx?file=/src/App.js

1 ShubhamVerma Sep 11 2020 at 23:35

Non consiglierei jquery in React. Per qualsiasi motivo se vuoi usarlo. Devi importare tutti questi file al tuo index.htmlposto nella publiccartella: