反应实现侧边栏问题类型错误: $(..).sideNav 不是一个函数

我正在尝试将"react-materialize"npm 模块与 React 一起使用。我按照启动说明进行操作并遇到此错误："类型错误：$(...(。sideNav 不是一个函数"。人们对此有类似的问题，但没有一个解决方案有效。

这是我的索引.html..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>title</title>
</head>
<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"></script>
</body>
</html>

如您所见，我已经链接到所有必需的依赖项才能使其工作。

这是我的 React 组件。

  import React, { Component } from 'react';
  import { SideNav, SideNavItem } from 'react-materialize';
  import './Header.css';
  class Header extends Component {

    render() {
      return (
        <div className="Header">
          <div className="navbar-fixed">
            <nav className="teal">
              <div className="container">
               <div className="nav-wrapper">
                 <a className="brand-logo" href="#">brand logo</a>
                   <SideNav trigger={<i className="materialize-icons">menu</i>} options={{ closeOnClick: true }}>
                     <SideNavItem href="#link1" icon="cloud"></SideNavItem>
                   </SideNav>
                   <ul className="right hide-on-med-and-down">
                     <li><a href="#link1">Link1</a></li>
                     <li><a href="#link2">Link2</a></li>
                     <li><a href="#link3">Link3</a></li>
                     <li><a href="#link4">Link4</a></li>
                   </ul>
                </div>
              </div>
            </nav>
          </div>
        </div>
      );
    }
  }
  export default Header;

我已经通过在索引的标题中包含jquery来修复(我会说缓解了(这个问题.html而不是页脚：

<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
 <meta name="theme-color" content="#000000" />
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet"/>
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <title>Tic Tac Toe</title>
</head>
 ...
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

这样，组件可以毫无错误地呈现。到目前为止，我尝试了按钮，图标，导航栏和导航项。

相关内容

最新更新

热门标签：