jquery işlevini başlatırken componentDidMount () sorunu - React

Sep 12 2020

ReactJS uygulaması üzerinde çalışıyorum. Benim $ (document) .ready (function () {}); React Router Dom ile yolu değiştirdikten sonra çalışmayı bırak. Bu soruna çözüm bulmak için google'da arama yaptım. Bu makaleyi buluyorum:

React-router: $ (document) .ready () nasıl tetiklenir?

Bu sorunun cevabındaki kodu kullandım. Kodumu burada görebilirsiniz:

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;

Bu kod işe yaramadı. Neden bilmiyorum Burada React hatasını görebilirsiniz:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_2 ___ varsayılan (...) (...). BootstrapMaterialDesign bir işlev değildir

Ham javascript için komut dosyası: <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>Teşekkürler ☺

Yanıtlar

1 HarleyLang Sep 12 2020 at 00:15

İşte jQuery'ye ihtiyaç duymadan, React ile bootstrap veya material-design'ın nasıl kurulup kullanılacağına dair kısa bir adım.

Bootstrap, sürüm 5'de jQuery'den uzaklaşmayı planlamaktadır, bu nedenle, kod tabanınızın o ayağını korumak istediğinizden emin olmadığınız sürece jQuery'ye bağlı olmayan kitaplıkları seçmek önemlidir (ancak diğer yorumcuların da belirttiği gibi, React içinde jQuery gerekli değildir ve aslında vanilya Javascript de aynı derecede işlevsel olabilir ).

Öncelikle, önyükleme mi yoksa malzeme tasarımı mı yoksa her ikisine birden mi ihtiyacınız olduğuna karar vermeniz gerekecek. Sadece önyükleme bileşenlerini istediğinizi varsayarak devam edeceğim, bu durumda aşağıdaki tüm kodlar uygundur (giriş için, buraya bakın ). Aksi takdirde, materyal tasarım talimatlarını izlemeniz gerekir, buraya bakın .

Kurulumla birlikte ileriye:

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

Aynı klasörden çalıştırın npm startve dosyalarınızı düzenlemeye başlayalım.

App.js dosyanızda aşağıdaki gibi değiştirin:

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;

Bunun sınıfları değil, işlevsel programlama kullandığını unutmayın. Yani 'didComponentMount'a gerek yok. Yönlendirici yapılandırmalarınızı temel, tepki verilecek yeni bir kurulum için ayarladım.

Şimdi Main.js dosyanızın temel bir yönlendirici kurulumuna sahip olduğunu varsayarsak, aşağıdaki gibi ayarlayın:

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 örneği burada: https://codesandbox.io/s/react-simple-bootstrap-example-xydjx?file=/src/App.js

1 ShubhamVerma Sep 11 2020 at 23:35

React'te jquery'yi önermem. Herhangi bir nedenle kullanmak istiyorsanız. Tüm bu dosyaları klasörünüzün index.htmlaltındaki yerinize aktarmanız gerekir public: