5

我正在使用 React 开发应用程序，我想使用 sidenav 组件http://materializecss.com/side-nav.html

问题是我收到了这个错误：

Sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).sideNav is not a function
    at HTMLDocument.<anonymous> (Sidebar.js:8)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)

我对导入组件、库的方式感到很困惑。它们有很多，并且有很多配置方法。

我所做的是：

  1. 创建应用程序

    创建反应应用

  2. 通过 npm 安装实现

    npm install materialize-css@next

  3. 创建反应应用

这是我正在使用的代码：

索引.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="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/babel" src="js/materialize.min.js"></script>
  </body>
</html>

应用程序.js

import React from 'react'
import {BrowserRouter, Route} from 'react-router-dom';
import Sidebar from './Sidebar'

const Dashboard = () => <h2>Dashboard</h2>
const Survey = () => <h2>Survey</h2>
const Landing = () => <h2>Landing</h2>
const Home = () => <h2>Home</h2>

const App = () => {
    return (
            <div>
                <BrowserRouter>
                    <div>
                        <Sidebar />
                        <Route exact path="/" component={Home} />
                        <Route path="/surveys" component={Dashboard} />
                    </div>
                </BrowserRouter>
                Hi There!
            </div>
        )
}

export default App;

Sidebar.js

import React, {Component} from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import $ from 'jquery';

class Sidebar extends Component {
    componentDidMount() {
        $(document).ready(function(){
            $('.sidenav').sideNav();
        });
    }

    render() {
        return (
            <ul id="slide-out" className="sidenav"> 
                <li><a href="#!"><i className="material-icons">cloud</i>First Link With Icon</a></li>
                <li><a href="#!">Second Link</a></li>
            </ul>
        );
    }
}

export default Sidebar;

包.json

{
  "name": "support-tools",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "materialize-css": "^1.0.0-alpha.4",
    "nodemon": "^1.15.1",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-bootstrap-sidebar": "0.0.1",
    "react-burger-menu": "^2.2.3",
    "react-dom": "^16.2.0",
    "react-materialize": "^1.1.2",
    "react-mdl": "^1.11.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "react-sidebar": "^2.3.2",
    "react-sidenav": "^2.1.2",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我试过在 index.js 上使用两个版本的 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

和

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

但我可以让 sidenav 运行。我能做什么？

4

3 回答 3

9

经过多次尝试后，我终于开始使用 React 运行 SideNav：

包.json

{
  "name": "sidebar",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "material-design-icons": "^3.0.1",
    "materialize-css": "^1.0.0-alpha.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-mdl": "^1.11.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

索引.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="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <title>React App</title>

    <style type="text/css">
      select{
        display: block !Important;
      }
    </style>
  </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.2.1.min.js"></script>
  </body>
</html>

应用程序.js

import React from 'react'
import {BrowserRouter, Route} from 'react-router-dom';
import Sidebar from './Sidebar'

const Dashboard = () => <h2>Dashboard</h2>
const Survey = () => <h2>Survey</h2>
const Landing = () => <h2>Landing</h2>
const Home = () => <h2>Home</h2>

const App = () => {
    return (
            <div>
                <BrowserRouter>
                    <div>
                        <Sidebar />
                        <Route exact path="/" component={Home} />
                        <Route path="/surveys" component={Dashboard} />
                    </div>
                </BrowserRouter>
                Hi There!
            </div>
        )
}

export default App;

Sidebar.js

import React, { Component } from "react";
import M from "materialize-css/dist/js/materialize.min.js";
import { BrowserRouter, Route } from "react-router-dom";
import "materialize-css/dist/css/materialize.min.css";

class Sidebar extends Component {
    componentDidMount() {
        var elem = document.querySelector(".sidenav");
        var instance = M.Sidenav.init(elem, {
            edge: "left",
            inDuration: 250
        });
    }

    render() {
        return (
            <div>
                <ul id="slide-out" className="sidenav">
                    <li />
                    <li>
                        <a href="#!">
                            <i className="material-icons">cloud</i>First Link
                            With Icon
                        </a>
                    </li>
                    <li>
                        <a href="#!">Second Link</a>
                    </li>
                    <li>
                        <div className="divider" />
                    </li>
                    <li>
                        <a className="subheader">Subheader</a>
                    </li>
                    <li>
                        <a className="waves-effect" href="#!">
                            Third Link With Waves
                        </a>
                    </li>
                </ul>
                <a href="#" data-target="slide-out" className="sidenav-trigger">
                    <i className="material-icons">menu</i>
                </a>
            </div>
        );
    }
}

export default Sidebar;

您也可以从这里签出项目：

https://github.com/AndyBraveMX/react-learning/tree/master/react-sidenav-materializecss

于 2018-04-04T05:22:05.193 回答
1

只是想为其他用户指出，如果您使用的是 npm，请确保使用其文档中列出的命令安装 materialize：npm install materialize-css@next

不要忘记最后的' @next '。

安装的版本将类似于：

“materialize-css”：“^1.0.0-rc.2”或“materialize-css”：“^1.0.0-alpha.4”

https://materializecss.com/getting-started.html

于 2018-08-02T20:50:49.807 回答
0

尝试这个

import M from "materialize-css/dist/js/materialize.min.js";

接下来初始化sidenav

  componentDidMount() {
   let sidenav = document.querySelector("#slide-out");
   M.Sidenav.init(sidenav, {});
}

导航栏

   <nav>
      <a href="#" data-target="slide-out" className="sidenav-trigger">
        <i className="material-icons">menu</i>
      </a>

      <a href="#" className="brand-logo">
        Logo
      </a>

      <ul id="nav-mobile" className="right hide-on-med-and-down">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
      </ul>
    </nav>

侧导航

   <ul id="slide-out" className="sidenav">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
    </ul>

不要忘记 npm install --save materialize-css@next

于 2020-06-24T13:50:33.800 回答