react-materialize 侧边栏问题 TypeError: $(...).sideNav is not a function
Posted
技术标签:
【中文标题】react-materialize 侧边栏问题 TypeError: $(...).sideNav is not a function【英文标题】：react-materialize sidebar issue TypeError: $(...).sideNav is not a function 【发布时间】：2018-09-25 02:18:46 【问题描述】：我正在尝试将“react-materialize”npm 模块与 React 一起使用。我已按照启动说明操作并遇到此错误：“TypeError: $(...).sideNav is not a function”。人们遇到过类似的问题，但没有一个解决方案有效。
这是我的 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;
【问题讨论】：
我遇到了一个非常相似的问题，但对我来说，应用程序正在运行（在开发和部署中），我只在尝试运行测试时收到此错误消息（使用内置渲染测试包含在 create-react-app 中） 同样的问题，您（或任何人）找到解决方案了吗？ 【参考方案1】：我已经通过在 index.html 的头部而不是页脚中包含 jquery 来修复（我会说减轻了）这个问题：
<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、Icons、NavBars 和 NavItems。
【讨论】：
以上是关于react-materialize 侧边栏问题 TypeError: $(...).sideNav is not a function的主要内容，如果未能解决你的问题，请参考以下文章