个人中心
gpt4 book ai didi

reactjs - 如何在 React 中使用 Materialize CSS 的 sideNav？

转载 作者：行者123 更新时间：2023-12-03 13:40:38 25 4
gpt4 key购买 nike

我正在使用 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. 使用以下内容创建应用

    创建 react 应用程序

  2. 通过 npm 安装 Materialise

    npm 安装materialize-css@next

  3. 创建 React 应用

这是我正在使用的代码:

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;

侧边栏.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 运行。我能做什么？

最佳答案

经过多次尝试，我终于运行了使用 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

关于reactjs - 如何在 React 中使用 Materialize CSS 的 sideNav？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48911593/

25 4 0
文章推荐： reactjs - 如何使用 sinon stub 文档方法 - React
文章推荐： android-studio - android studio 3.1:build:gradle:3.1.0-设置输出文件名时不支持绝对路径
文章推荐： performance - 性能与可读性
文章推荐： css - 将颜色设置为 Reactstrap Navlink
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com