时间戳

首页 > 解决方案 > 如何将 JS 库和脚本导入 React 项目？

reactjs - 如何将 JS 库和脚本导入 React 项目？

问题描述

我有一个工作项目并导入了一个库（materialize.js）和一个与 sidenav 一起使用的小脚本，但它不起作用。

脚本将 EventListener 制作为图标，并显示 sidenav。图标和 sidenav 放在不同的组件中。

这是 Header 组件的列表（我删除了很多人员，这与脚本无关）：

import React, { Component } from 'react';
import logo from '../img/logo.png';
import { Link } from 'react-router-dom';

class Header extends Component {
  render() {
    return (
      <div id="top" className="dark">
        <section id="top-section">
          <div className="container">
            <div className="flex-bet">
              <Link to="/"><div className="logo"><img src={logo} alt="" /></div></Link>
              <a href="#" data-target="mobile-demo" className="sidenav-trigger right hide-on-large-only">
                <i id="icon" className="material-icons">menu</i>
              </a>
            </div>
          </div>
        </section>
      </div>
    );
  }
}

export default Header;

sidenav 组件：

import React, { Component } from 'react';

class Sidenav extends Component {
  render() {
    return (
      <ul className="sidenav" id="mobile">
        <li className="sidenav-close"><a href="">111</a></li>
        <li className="sidenav-close"><a href="">222</a></li>
        <li className="sidenav-close"><a href="">333</a></li>
        <li className="sidenav-close"><a href="">444</a></li>
        <li className="sidenav-close"><a href="">555</a></li>
      </ul>
    );
  }
}

export default Sidenav;

一个 index.html 文件，其中导入了库和脚本：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <title>Интер Сухум</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans|Alice|Anonymous+Pro|Andika|Arimo|Arsenal|Cousine|El+Messiri|Forum|Gabriela|Jura|Ledger|Literata|Lora|Merriweather|Montserrat+Alternates|Noto+Sans|Noto+Serif|Noto+Serif+SC|Noto+Serif+TC|PT+Mono|PT+Serif|PT+Serif+Caption|Play|Prata|Source+Sans+Pro|Spectral|Tenor+Sans|Tinos|Ubuntu+Condensed|Vollkorn&display=swap"
    rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>  
  <script>
    $(document).ready(function () {
      $('.sidenav').sidenav();
    }); 
  </script>
  <script src="https://snapwidget.com/js/snapwidget.js"></script>
  <script type="text/javascript" src="js/materialize.js"></script>
</body>

</html>

这种方法有什么问题？谢谢大家！

标签： reactjsmaterialize

解决方案

使用 React 时直接操作 DOM 并不理想

 $(document).ready(function () {
      $('.sidenav').sidenav();
    });

您可以将 onClick 事件添加到您的 sidenav 项目并在那里调用您的 sidenav 函数。

import React, { Component } from 'react';

class Sidenav extends Component {

  sidenav = () => {
    // handle logic here
  }
  render() {
    return (
      <ul className="sidenav" id="mobile">
        <li className="sidenav-close" onClick={this.sidenav}><a href="">111</a></li>
        <li className="sidenav-close" onClick={this.sidenav}><a href="">222</a></li>
        <li className="sidenav-close" onClick={this.sidenav}><a href="">333</a></li>
        <li className="sidenav-close" onClick={this.sidenav}><a href="">444</a></li>
        <li className="sidenav-close" onClick={this.sidenav}><a href="">555</a></li>
      </ul>
    );
  }
}

export default Sidenav;

我建议使用 Materialize 的 React 实现，它会让你的生活更轻松。

http://react-materialize.github.io/react-materialize/?path=/story/react-materialize--welcome

推荐阅读