Reactjs 如何导入JS库和脚本以响应项目？_Reactjs_Materialize

Reactjs 如何导入JS库和脚本以响应项目？

reactjs

Reactjs 如何导入JS库和脚本以响应项目？,reactjs,materialize,Reactjs,Materialize,我有一个工作项目并导入了一个库（materialize.js）和一个使用sidenav的小脚本，但它不工作这些脚本使EventListener成为一个图标，并显示一个sidenav。图标和sidenav在不同的组件中被隔离下面是Header组件的列表（我删除了很多工作人员，这与脚本无关）： import React，{Component}来自'React'；从“../img/logo.png”导入徽标；从'react router dom'导入{Link}；类头扩展组件{ rende

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

这些脚本使EventListener成为一个图标，并显示一个sidenav。图标和sidenav在不同的组件中被隔离

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

import React，{Component}来自'React'；
从“../img/logo.png”导入徽标；
从'react router dom'导入{Link}；
类头扩展组件{
render（）{
返回(
);
}
}
导出默认标题；

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;

import React，{Component}来自'React'；
类Sidenav扩展组件{
render（）{
返回(







);
}
}
导出默认侧导航；

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>


Интер Сухум
您需要启用JavaScript才能运行此应用程序。
$（文档）.ready（函数（）{
$（'.sidenav'）.sidenav（）；
});

这种方法有什么问题？

谢谢大家

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

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

您可以将onClick事件添加到sidenav项中，并在那里调用sidenav func

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;

import React，{Component}来自'React'；
类Sidenav扩展组件{
侧导航=（）=>{
//在这里处理逻辑
}
render（）{
返回(







);
}
}
导出默认侧导航；

我建议使用Materialize的React实现，它将使您的生活更加轻松

根反应组件在哪里？你能提供一份报告吗？那样我们可以帮你更容易。

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;