如何使用物化css的sideNav进行反应？

时间：2018-02-21 17:05:20

标签： reactjs materialize sidenav

我正在使用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

    安装materialize

    npm install materialize-css @ next

  3. 创建反应应用

    4. 以下是我使用的代码：

    的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="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>

    App.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;

    的package.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运行。我该怎么办？

3 个答案:

答案 0 :(得分：5)

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

<强>的package.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"
  }
}

<强>的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="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>

<强> App.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

答案 1 :(得分：1)

只是要向其他用户指出，如果您使用的是npm，请确保使用其文档中列出的命令来安装物化： 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

答案 2 :(得分：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>

sidenav 

   <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

相关问题
最新问题