jquery 함수 시작시 componentDidMount () 문제-React

Sep 12 2020

ReactJS 응용 프로그램에서 일하고 있습니다. 내 $ (document) .ready (function () {}); React Router Dom으로 경로를 전환 한 후 작동을 멈 춥니 다. 이 문제에 대한 해결책을 찾기 위해 Google을 검색했습니다. 이 기사를 찾았습니다.

React-router : $ (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 오류를 볼 수 있습니다.

유형 오류 : jquery__WEBPACK_IMPORTED_MODULE_2 ___ default (...) (...). bootstrapMaterialDesign은 함수가 아닙니다.

원시 자바 스크립트 스크립트 : <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>감사합니다 ☺

답변

1 HarleyLang Sep 12 2020 at 00:15

다음은 jQuery 없이도 React로 부트 스트랩 또는 머티리얼 디자인을 설치하고 사용하는 방법에 대한 간단한 연습입니다.

부트 스트랩은 버전 5의 jQuery에서 벗어날 계획 이므로 jQuery에 의존하지 않는 라이브러리를 선택하는 것이 중요합니다. React 내의 jQuery는 필요하지 않으며 실제로 vanilla Javascript는 기능적 일 수 있습니다 .

먼저 부트 스트랩이나 머티리얼 디자인 또는 둘 다가 필요한지 결정해야합니다. 부트 스트랩 구성 요소 만 원한다고 가정하겠습니다.이 경우 아래의 모든 코드가 잘 적용됩니다 (소개 는 여기 참조 ). 그렇지 않으면 머티리얼 디자인 지침을 따라야합니다 . 여기를 참조하십시오 .

설치 이후 :

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'가 필요하지 않습니다. 그리고 기본적이고 새로운 반응 설정을 위해 라우터 구성을 조정했습니다.

이제 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 StackOverflow!</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

1 ShubhamVerma Sep 11 2020 at 23:35

나는 반응에서 jquery를 권장하지 않습니다. 어떤 이유로 든 사용하고 싶다면. 폴더 index.html아래에 있는 모든 파일을 가져와야 public합니다.