什么是Uncaught TypeError.Cannot读取AppBar + Drawer组件(ReactJS + Material-UI)的undefined的'open'属性？无法读取AppBar + Drawer组件（ReactJS + Material-UI）的undefined属性'open'？

Question

我试图让AppBar左边的导航、默认汉堡包图标 ( http:/www.material-ui.com#componentsapp-bar )，以在点击时滑动打开抽屉组件( http:/www.material-ui.com#componentsdrawer ). 但是一旦点击，我就会出现以下错误，我看不明白。

Uncaught TypeError: 无法读取未定义的 "open "属性。

如果有什么见解或指导，将非常感谢。先谢谢你了，我正在尝试让Material-UI框架的导航、默认的汉堡包图标在AppBar的左边（http:/）滑动打开抽屉。

import React, { Component } from 'react'
import { Drawer, AppBar, MenuItem} from 'material-ui'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Route, Router } from 'react-router'



export default class Main extends Component  {

  constructor(props, context){
    super(props, context);
    this.state = {open:false};
  }

  getChildContext() {
    return {muiTheme: getMuiTheme(baseTheme)};
  }

  handleToggle() {
    this.setState({open: !this.state.open});
   }

        render() {
            return (
                <div>
                <AppBar   
                  isInitiallyOpen={true} 
                  onLeftIconButtonTouchTap={this.handleToggle}        
                  onLeftIconButtonClick={this.handleToggle} 
                />

                <Drawer
                  docked={false}
                  open={this.state.open}>
                  <MenuItem>Menu Item 1</MenuItem>
                  <MenuItem>Menu Item 2</MenuItem>
                  <MenuItem>Menu Item 3</MenuItem>
                </Drawer>
                </div>
            );
        }
    }

export default Main;

Answer 1

你也可以用函数组件代替类组件网。这将使你的组件更清晰，更易读--。

import React, { useState } from 'react'
import { Drawer, AppBar, MenuItem } from 'material-ui'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Route, Router } from 'react-router'



export default function Main(props) {

    let [open, setOpen] = useState(false);

    let handleToggle = () => {
        setOpen(!open);
    }

    return (
        <div>
            <AppBar
                isInitiallyOpen={true}
                onLeftIconButtonTouchTap={handleToggle}
                onLeftIconButtonClick={handleToggle}
            />

            <Drawer
                docked={false}
                open={open}>
                <MenuItem>Menu Item 1</MenuItem>
                <MenuItem>Menu Item 2</MenuItem>
                <MenuItem>Menu Item 3</MenuItem>
            </Drawer>
        </div>
    );
}