个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 05:45:55 24 4
gpt4 key购买 nike

我有以下 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() 写一些新的东西

下面是 react 代码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.js 导航栏示例元素

导航栏.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 */

路由.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;

关于javascript - 将 &lt;script&gt; 标签中的 jquery 和 javascript 集成到 react 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58707641/

24 4 0
文章推荐： c - C 中的 Malloc 问题
文章推荐： python - Pandas :一系列数组到一系列转置数组
文章推荐： java - 带有 Java 13.0.1 的 RaspberryPi 4
文章推荐： python - 是否有任何支持 Windows 7 样式文件选择器的 python GUI 框架？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com