使用 Appbar + Drawer 时遇到问题（Material UI + ReactJS）

Question

I'm trying to do my first app with ReactJS + Material UI but without success.

The only thing I want to do is, when I do click in the button on the bar, display a left drawer.

I have the following code (App.jsx):

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import AppBar from 'material-ui/AppBar';
import LeftDrawer from './LeftDrawer.jsx';


class App extends React.Component {

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

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

    render() {
        return (
            <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
                <div>
                    <AppBar
                    title = { "Test 1" }
                    onLeftIconButtonTouchTap={this.handleTouchMap.bind(this)}
                />
                    <LeftDrawer open={this.state.open} />
                </div>
            </MuiThemeProvider>  
        );
    }
}

export default App;

And the next (LeftDrawer.jsx):

import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';


class LeftDrawer extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div> 
                <Drawer open={this.state.open}>
                    <MenuItem>Menu Item 1</MenuItem>
                    <MenuItem>Menu Item 2</MenuItem>
                </Drawer>
            </div>
        );
    }
}

export default LeftDrawer;

And I'm always getting this:

Warning: Failed prop type: Invalid prop `children` supplied to `MuiThemeProvider`, expected a single ReactElement.
    in MuiThemeProvider (created by App)
    in App

Uncaught Invariant Violation: MuiThemeProvider.render(): 
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Do you have an idea what I'm doing wrong? Please!

If I put a <div> to wrap <Appbar> and <Leftdrawer> in App.jsx. It solves the MuiThemeProvider error. But now, I get the following error:

Uncaught TypeError: Cannot read property 'open' of null

Answer 1

You should store the opening state of drawer in App component's state, and pass it as a prop to Drawer component.

App.jsx:

class MatApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
  }

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

  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
        <AppBar
          title = { "Test 1" }
          onLeftIconButtonTouchTap = { this.handleTouchMap.bind(this) }
        />
        <LeftDrawer open={this.state.open} />
      </MuiThemeProvider>  

    );
  }

}
export default App;

LeftDrawer.jsx :

class LeftDrawer extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Drawer open={this.props.open}>
          <MenuItem>Menu Item</MenuItem>
          <MenuItem>Menu Item 2</MenuItem>
        </Drawer>
      </div>
    );
  }
}
export default LeftDrawer;

Answer 2

You are passing the open value as a prop to the LeftDrawer component like this:

<LeftDrawer open={this.state.open} />

so inside the LeftDrawer this value is visible as a prop , not as state , so you should access it like this:

<Drawer open={this.props.open}>
    <MenuItem>Menu Item</MenuItem>
    <MenuItem>Menu Item 2</MenuItem>
</Drawer>

Answer 3

I haven't read all the code but one obvious problem that causes your error is that you are passing multiple children to MuiProvider. Wrap all the content in just one div, like this :

 render() {
 return (
   <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
    <div>
     <AppBar
       title = { "Test 1" }
       onLeftIconButtonTouchTap = { this.handleTouchMap.bind(this) }
     />
     <LeftDrawer open={this.state.open} />
    </div>
   </MuiThemeProvider>  
 );}

You should be able to continue from here.