将 <script> 标签中的 jquery 和 javascript 集成到 react 中答案

【问题标题】：Integrate jquery and javascript from <script> tag into react将 <script> 标签中的 jquery 和 javascript 集成到 react 中
【发布时间】：2019-11-05 08:53:59
【问题描述】：

我有以下 HTML 代码，我想将其集成到 react 中，但不知道该怎么做。

我认为这是一个基本错误。我什至可能都错了

我想在我的 react APP 中使用以下 HTML 的功能。它是一个很好的响应式菜单，带有一个扩展为移动菜单的汉堡栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--Import Google Icon Font-->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <!-- Compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

    <title>GRID</title>
  </head>
  <body>

<nav class="nav-wrapper indigo">
  <div class="container">
    <a href="#" class="brand-logo">Site Title</a>
    <a href="#" class="sidenav-trigger" data-target="mobile-links">
      <i class="material-icons" onClick="displayMobileMenu">menu</i>
    </a>

    <ul class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Login</a></li>
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script
    $(document).ready(function(){
      $('.sidenav').sidenav();
    });></script>

  </body>
  </html>

以下是我尝试过的方法 我已经安装了依赖项

jquery {npm i jquery}（我认为这可行，但不能用于其他任何事情，所以不确定）
Materialize {npm i materialize}（这适用于网站的其余部分）

我的问题是我不确定是否应该使用 jquery 或使用 componentDidMount() 编写新的东西

下面是反应代码 codesanbox.io 在这里https://codesandbox.io/embed/wiki-mogpb?fontsize=14

import React from "react";
import { Link } from "react-router-dom";
import $ from "jquery";



const displayMobileMenu = () => {
  return (
      $('.sidenav').sidenav()
  )
};

const Navbar = ({ title }) => {
  return (
    <div>
      <nav className="nav-wrapper indigo">
        <div className="container">
          <a href="#" className="brand-logo">
            React Wiki
          </a>
          <a href="#" className="sidenav-trigger" data-target="mobile-links">
            <i
              className="material-icons"
              onClick={displayMobileMenu()}
            >
              menu
            </i>
          </a>

          <ul className="right hide-on-med-and-down">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/files">React Files</Link>
            </li>
            <li>
              <Link to="/context">Contexts</Link>
            </li>
            <li>
              <Link to="/questions">Questions</Link>
            </li>
          </ul>
        </div>
      </nav>

      <ul className="sidenav" id="mobile-links">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
        <li>
          <a href="#">Login</a>
        </li>
      </ul>
    </div>
  );
};
Navbar.defaultProps = {
  title: " React Wiki"
};

export default Navbar;

【问题讨论】：

将 React 与 jQuery 混合使用通常是相反的。你真的应该找到一种与 React 兼容的方式来实现你所需要的

标签： javascript jquery css reactjs materialize

【解决方案1】：

这里是 react.js 中导航栏的简单示例项目

Navbar.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { FaAlignRight } from "react-icons/fa";
/*--------------- css ----------------*/
import './Navbar.css';

export default class Navbar extends Component {
  state = {
    isOpen: false
  };
  handleToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };
  render() {
    return (
      <nav className="navbar">
        <div className="nav-center">
          <div className="nav-header">
            <Link to="/" className='logo'>
                rao
            </Link>
            <button
              type="button"
              className="nav-btn"
              onClick={this.handleToggle}
            >
              <FaAlignRight className="nav-icon" />
            </button>
          </div>
          <ul
            className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}
            onClick={this.handleToggle}
          >
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/services">Services</Link>
            </li>
            <li>
              <Link to="/aboutus">About Us</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/portfolio">Portfolio</Link>
            </li>
            <li>
              <Link to="/clientele">Clientele</Link>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

/* Navbar.css */
.navbar {
  top: 0;
  left: 0;
  width: 100%;
  background: var(--offWhite);
  z-index: 1;
}

.nav-header {
  display: flex;
  justify-content: space-between;
}

.nav-header .logo{
  color: darkblue;  
  text-decoration: none;
  font-size: 50px;
  font-family: 'Courier New', Courier, monospace;
}

.nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding-right: 20px;
}
.nav-icon {
  font-size: 1.5rem;
  color: var(--primaryColor);
}
.nav-links {
  height: 0;
  overflow: hidden;
  transition: var(--mainTransition);
  list-style-type: none;
  padding: 0px;
  right: 0px;
  transition: height 1s;
}
.nav-links a {
  display: block;
  text-decoration: none;
  padding: 1rem 0;
  color: var(--mainBlack);
  transition: var(--mainTransition);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--mainSpacing);
}
.nav-links a:hover {
  color: var(--primaryColor);
}

.show-nav {
  height: 300px;
  transition: height 1s;
}

@media screen and (min-width: 768px) {
  .nav-btn {
    display: none;
  } 
  .nav-center {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
  }
  .nav-links {
    height: auto;
    display: flex;
    margin-right: 8rem;
    position: absolute;
    right: 0px;

  }
  .nav-links a {
    margin: 0 1rem;
    padding: 0.5rem 0;
  }
}
/* end of navbar */

routes.js

/**
 * Routes : returns routes of our application for router
 */
import React from 'react';
import { Route , Switch } from 'react-router-dom';
/****************** Components ******************/

import AboutUs from './Components/AboutUs/aboutus';
import Careers from './Components/Careers/careers';
import ContactUs from './Components/ContactUs/contactus';
import Services from './Components/Services/services';
import Products from './Components/Products/products';
import Portfolio from './Components/Portfolio/Portfolio';
import Clientele from './Components/Clientele/Clientele';
import Home from './Components/Home/home';
import FourOFour from './Components/FourOFour/fourofour';

const Routes = () => {
   return (
       <Switch>
           <Route path="/aboutus" exact component={AboutUs}/>
           <Route path="/careers" exact component={Careers}/>
           <Route path="/contactus" exact component={ContactUs}/>
           <Route path="/services" exact component={Services}/>
           <Route path="/products" exact component={Products}/>
           <Route path="/portfolio" exact component={Portfolio}/>
           <Route path="/clientele" exact component={Clientele}/>
           <Route path="/" exact component={Home}/>
           <Route component={FourOFour}/>        
       </Switch>
   )
}

export default Routes;

【讨论】：