使用Appbar +抽屉(材料UI + ReactJS)时遇到问题 [英] Having trouble using Appbar + Drawer (Material UI + ReactJS)

问题描述

我正在尝试使用ReactJS + Material UI创建我的第一个应用程序，但没有成功.

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.

我有以下代码(App.jsx):

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;

以及下一个(LeftDrawer.jsx):

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;

我总是得到这个:

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!

致谢！

更新:

如果我将<div>包裹在App.jsx中的<Appbar>和<Leftdrawer>中.它解决了MuiThemeProvider错误. 但是现在，我收到以下错误:

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

推荐答案

您应将抽屉的打开状态存储为App组件的状态，并将其作为道具传递给Drawer组件.

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;

这篇关于使用Appbar +抽屉(材料UI + ReactJS)时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！