Как использовать SideNav материализации CSS с реагировать?

Question

Как использовать SideNav материализации CSS с реагировать?

Я разрабатываю приложение с 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)

Я так запутался со способом импорта компонентов, библиотек. Их много и способов их настроить.

Что я сделал, это:

Создать приложение с
создает реагирующий-приложение
Установить материализацию через npm
npm install materialize-css @ next
Создать приложение реакции

Вот код, который я использую:

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"
  }
}

Я пытался использовать две версии jQuery на index.js

<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. Что я мог сделать?

5

reactjs materialize sidenav

Источник

user1670134 21 фев '18 в 17:05

5 ответов

Другие вопросы по тегам reactjs materialize sidenav

user1670134 04 апр '18 в 05:22 2018-04-04 05:22 · Answer 1 · 2018-04-04 05:22

После многих попыток я наконец запустил SideNav с React:

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

user408723 02 авг '18 в 20:50 2018-08-02 20:50 · Answer 2 · 2018-08-02 20:50

Просто хочу отметить для других пользователей, если вы используете 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

Kiisi Felix 14 фев '23 в 01:29 2023-02-14 01:29 · Answer 3 · 2023-02-14 01:29

До:
<a href="#" data-target="mobile-demo" className="sidenav-trigger"><i className="material-icons">menu</i></a>

После:<a data-target="mobile-demo" className="sidenav-trigger"><i className="material-icons">menu</i></a>

Удалите атрибут href изярлык

0

Источник

Kiisi Felix 14 фев '23 в 01:29

user12772169 24 июн '20 в 16:50 2020-06-24 16:50 · Answer 4 · 2020-06-24 16:50

Попробуй это

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

затем инициализировать боковую навигацию

  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

TymPosuv 12 май '22 в 14:16 2022-05-12 14:16 · Answer 5 · 2022-05-12 14:16

Также в функциональном подходе вместо этого фрагмента, приведенного в ответе выше

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

используйте такой код:

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

0

Источник

TymPosuv 12 май '22 в 14:16