javascript - Having trouble using Appbar + Drawer (Material UI + ReactJS) - Stack Overflow

admin管理员组

文章数量:1291145

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

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

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jan 13, 2021 at 13:08 Enlico 28.5k88 gold badges6767 silver badges149149 bronze badges asked Jul 18, 2016 at 5:16 Javier MuñozJavier Muñoz 79011 gold badge1313 silver badges3131 bronze badges 2

• ur file name is DrawerLeft.jsx but u r importing LeftDrawer.jsx file, is this file there? – Nageshwar Reddy Pandem Commented Jul 18, 2016 at 5:43
• @NageshwarReddy It's correct, I wrote it bad here. Thank you! – Javier Muñoz Commented Jul 18, 2016 at 5:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

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;

You are passing the open value as a prop to the LeftDrawer ponent 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>

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.

本文标签： javascriptHaving trouble using AppbarDrawer (Material UIReactJS)Stack Overflow