Question

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

这是我的index.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;

Answer 1

我通过将jquery包括在index.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>

通过这种方式，组件呈现无错误。到目前为止，我尝试了Buttons，Icon，NavBars和NavItems。

react-materialize侧栏问题TypeError：$（...）。sideNav不是函数

1 个答案: