如何使用React的实体CSS的侧翼

我正在开发带有react的应用程序，我想使用sidenav组件http://materializecs.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)

我对导入组件，库的方式很困惑。它们中有很多以及许多配置的方法。

我所做的是：

用
创建应用程序
create-react-app
通过npm
安装实质性安装
npm安装Mitalige-CSS@Next
创建React App

这是我正在使用的代码：

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

在许多尝试之后，我与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/reaect-Learning/tree/master/react-sidenav-materializecss

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

不要忘记' @next ''

安装版本将像：

" Materialize-css"："^1.0.0-rc.2"或者" Materialize-CSS"："^1.0.0-Alpha.4"

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

尝试此

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

接下来初始化sidenav

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

navbar

   <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安装-Save Mitalize-CSS@Next

在功能方法中也是该片段，在上面的答案中给出

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

使用这样的代码：

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

之前：
<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>

从 <a></a> tag

中删除HREF属性

相关内容

最新更新

热门标签：