Question

我有一个正在运行的项目，并导入了一个库（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>

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

Answer 1

使用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

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

1 个答案: