反应滑出菜单状态=未设置状态?

时间:2020-02-19 19:28:18

标签: javascript reactjs state navigation-drawer

我正在尝试为React开发一个带有路由功能的滑出菜单。由于某些原因,state = {}未设置定义sideDrawOpen的原因可能是感谢您的帮助。我开始纱线启动的错误是 “无法编译。

./ src / App.js 第21:45行:未定义'sideDrawerOpen'no-undef

搜索关键字以了解有关每个错误的更多信息。”

import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

import main_page from './components/main_page';
import setup_page from './components/setup_page';
import settings_page from './components/settings_page';
import Error from './components/Error';
import Nav from './components/Navigation/Nav';
import SideDrawer from './components/Navigation/SideDrawer';
import Backdrop from './components/Navigation/Backdrop';


export class App extends Component {
   state = {
   sideDrawerOpen: false
   }


   drawerToggleClickHandler = () => {
      this.setState((prevState) =>{
         return {sideDrawerOpen: !prevState,sideDrawerOpen};
      });
   };


  render() {
    let sideDrawer;
    let backdrop;

    if (this.state.sideDrawerOpen) {
      sideDrawer = <SideDrawer />
      backdrop = <Backdrop />
    }
  return (
    <div className="App_margin">
  <Router>
    <div className='App'>
      {sideDrawer}
      {backdrop}
      <Nav />
      <Switch>
        <Route path='/'  component={setup_page} exact/>
        <Route path='/main_page' component={main_page} />
        <Route path='/settings_page' component={settings_page} />
        <Route  component={Error} />
      </Switch>

    </div>
  </Router>
  </div>
  );
}
}

1 个答案:

答案 0 :(得分:3)

!prevState,sideDrawerOpen有逗号,而不是.