前端之家

  1. 首页
  2. 问答

将<script>标记中的jquery和javascript集成到react

• 问答

我有以下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}（我认为这可行，但不能用于其他用途，所以不确定）
  • 对{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;
dongdong28098 回答：将<script>标记中的jquery和javascript集成到react

这是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;

希望如此，您将了解如何使用reactJs构建导航栏。让我知道您是否有任何问题。

cssjavascriptjquerymaterializereactjs
本文链接：https://www.f2er.com/3161070.html

大家都在问