Problema de componentDidMount () ao iniciar a função jquery - React

Sep 12 2020

Estou trabalhando no aplicativo ReactJS. Meu $ (documento) .ready (função () {}); paro de funcionar depois de mudar de caminho com o React Router Dom. Pesquisei no google para encontrar uma solução para esse problema. Eu acho este artigo:

React-router: Como acionar $ (document) .ready ()?

Usei o código da resposta a esta pergunta. Você pode ver meu código aqui:

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;

Este código não funcionou. Não sei por quê. Aqui você pode ver o erro React:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_2 ___ default (...) (...). BootstrapMaterialDesign não é uma função

O script para javascript bruto é: <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>Obrigado ☺

Respostas

1 HarleyLang Sep 12 2020 at 00:15

Aqui está um pequeno passo a passo sobre como instalar e usar bootstrap ou material design com React, sem precisar do jQuery.

O Bootstrap está planejando se afastar do jQuery na versão 5, por isso é importante escolher bibliotecas que não dependam do jQuery, a menos que você tenha certeza de que deseja manter essa parte de sua base de código (mas como outros comentadores notaram, incluindo O jQuery no React não é necessário e, de fato, o Javascript vanilla pode ser tão funcional quanto ).

Primeiro, você precisará decidir se precisa de bootstrap ou material design, ou ambos. Prosseguirei supondo que você deseja apenas componentes de bootstrap; nesse caso, todo o código abaixo se aplica perfeitamente (para uma introdução, consulte aqui ). Caso contrário, você precisará seguir as instruções de design de material, veja aqui .

Avante com a instalação:

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

A partir dessa mesma pasta, execute npm starte vamos começar a editar seus arquivos.

Em seu arquivo app.js, altere da seguinte maneira:

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;

Observe que isso usa programação funcional, não classes. Portanto, não há necessidade de 'didComponentMount'. E eu ajustei as configurações do seu roteador para uma configuração básica nova para reagir.

Agora, supondo que seu arquivo Main.js tenha uma configuração básica de roteador, configure-o da seguinte maneira:

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

Exemplo de CodeSandbox aqui: https://codesandbox.io/s/react-simple-bootstrap-example-xydjx?file=/src/App.js

1 ShubhamVerma Sep 11 2020 at 23:35

Eu não recomendaria jquery em react. Por qualquer motivo, se você quiser usá-lo. Você precisa importar todos esses arquivos em seu index.htmllocal na publicpasta: