1

我有一个使用导入语句加载scss文件的应用程序。它构建良好，但在浏览器中加载时出错

VM148 transformed.js:19714 Uncaught ReferenceError: menuIcon is not defined
    at Sidebar.render (VM148 transformed.js:19714)
   ...
VM148 transformed.js:13839 The above error occurred in the <Sidebar> component:
    in Sidebar (created by App)
    in div (created by App)
    in App

我正在使用以下网址中的代码https://ashiknesin.com/blog/build-custom-sidebar-component-react/

将空字符串附加到后的新错误src

VM279 transformed.js:831 Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
    in Link (created by Sidebar)
    in li (created by Sidebar)
    in ul (created by Sidebar)
    in nav (created by Sidebar)
    in Sidebar (created by App)
    in div (created by App)
    in App
...
VM279 transformed.js:418 Uncaught Error: You should not use <Link> outside a <Router>
...
(anonymous) @ VM279 transformed.js:66
VM279 transformed.js:13839 The above error occurred in the <Link> component:
    in Link (created by Sidebar)
    in li (created by Sidebar)
    in ul (created by Sidebar)
    in nav (created by Sidebar)
    in Sidebar (created by App)
    in div (created by App)
    in App

侧边栏.js

import React from 'react'
import ReactDOM from 'react-dom'
import { IndexLink, Link } from 'react-router'
//import { BrowserRouter, IndexLink, Link, Route } from 'react-router-dom'
import './Sidebar.scss'
import classNames from 'classnames'

class Sidebar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showMenu: false
        }
        this.toggleMenu = this.toggleMenu.bind(this)
    }
    componentDidMount() {
        document.addEventListener('click', this.handleClickOutside.bind(this), true);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside.bind(this), true);
    }
    toggleMenu() {
        this.setState({ showMenu: !this.state.showMenu })
    }
    handleClickOutside(event) {
        const domNode = ReactDOM.findDOMNode(this);

        if ((!domNode || !domNode.contains(event.target))) {
            this.setState({
                showMenu: false
            });
        }
    }

    render() {

        const showMenu = this.state.showMenu;
        const sidebarClass = classNames({
            'sidebar': true,
            'sidebar-menu-expanded': showMenu,
            'sidebar-menu-collapsed': !showMenu
        });

        const elementsClass = classNames({
            'expanded-element': true,
            'is-hidden': !showMenu,
        });



    return (
      <nav className={sidebarClass}>
        <img
          className="menuIcon"
          src=""
          onClick={this.toggleMenu}
        />
        <ul>
          <li>
            <Link className="expandable" to="/setting" title="Setting">
              <img
                src={'https://png.icons8.com/setting/ffffff'}
                alt=""
              />
              <span className={elementsClass}>Setting</span>
            </Link>
          </li>
        </ul>
      </nav>

        )
    }
}


export default Sidebar
4

0 回答 0