Sự cố componentDidMount () khi khởi động hàm jquery - React

Sep 12 2020

Tôi đang làm việc trên ứng dụng ReactJS. My $ (document) .ready (function () {}); ngừng hoạt động sau khi tôi chuyển đường dẫn với React Router Dom. Tôi đã tìm kiếm trên google để tìm giải pháp cho vấn đề này. Tôi tìm thấy bài viết này:

React-router: Làm thế nào để kích hoạt $ (tài liệu) .ready ()?

Tôi đã sử dụng mã từ câu trả lời của câu hỏi này. Bạn có thể xem mã của tôi ở đây:

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;

Mã này không hoạt động. Tôi không biết tại sao. Tại đây bạn có thể thấy lỗi React:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_2 ___ default (...) (...). BootstrapMaterialDesign không phải là một hàm

Tập lệnh cho javascript thô là: <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>Cảm ơn bạn ☺

Trả lời

1 HarleyLang Sep 12 2020 at 00:15

Dưới đây là hướng dẫn ngắn gọn về cách cài đặt và sử dụng bootstrap hoặc material-design với React mà không cần jQuery.

Bootstrap đang có kế hoạch loại bỏ jQuery trong phiên bản 5, vì vậy điều quan trọng là phải chọn các thư viện sẽ không phụ thuộc vào jQuery, trừ khi bạn chắc chắn rằng điều này bạn muốn duy trì phần cơ sở mã của mình (nhưng như những người bình luận khác đã lưu ý, bao gồm jQuery trong React là không cần thiết và trên thực tế, vanilla Javascript có thể có chức năng như vậy ).

Đầu tiên, bạn sẽ cần quyết định xem mình cần bootstrap hay material design, hay cả hai. Tôi sẽ tiếp tục giả sử rằng bạn chỉ muốn các thành phần bootstrap, trong trường hợp đó, tất cả mã bên dưới đều áp dụng tốt (để biết phần giới thiệu, xem tại đây ). Nếu không, bạn sẽ cần làm theo hướng dẫn thiết kế material design, xem tại đây .

Trở đi với cài đặt:

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

Từ cùng thư mục đó, hãy chạy npm startvà bắt đầu chỉnh sửa tệp của bạn.

Trong tệp app.js của bạn, hãy thay đổi như sau:

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;

Lưu ý rằng điều này sử dụng lập trình chức năng, không phải các lớp. Vì vậy, không cần 'didComponentMount'. Và tôi đã điều chỉnh cấu hình bộ định tuyến của bạn để có một thiết lập cơ bản, mới để phản ứng.

Bây giờ, giả sử rằng tệp Main.js của bạn có thiết lập bộ định tuyến cơ bản, hãy thiết lập nó như sau:

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

Ví dụ về CodeSandbox ở đây: https://codesandbox.io/s/react-simple-bootstrap-example-xydjx?file=/src/App.js

1 ShubhamVerma Sep 11 2020 at 23:35

Tôi không giới thiệu jquery trong phản ứng. Vì bất kỳ lý do gì nếu bạn muốn sử dụng nó. Bạn cần nhập tất cả các tệp này vào index.htmlvị trí của mình trong publicthư mục: