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

【问题标题】：Having trouble using Appbar + Drawer (Material UI + ReactJS)使用 Appbar + Drawer 时遇到问题（Material UI + ReactJS）
【发布时间】：2016-07-18 05:16:42
【问题描述】：

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

我唯一想做的是，当我点击栏上的按钮时，显示一个左侧抽屉。

我有以下代码（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）：

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.

你知道我做错了什么吗？请！

如果我在 App.jsx 中放置 <div> 来包装 <Appbar> 和 <Leftdrawer>。它解决了 MuiThemeProvider 错误。但是现在，我收到以下错误：

Uncaught TypeError: Cannot read property 'open' of null

【问题讨论】：

你的文件名为 DrawerLeft.jsx 但你导入的是 LeftDrawer.jsx 文件，这个文件在吗？
@NageshwarReddy 是正确的，我在这里写得很糟糕。谢谢！

标签： javascript reactjs material-ui

【解决方案1】：

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

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;

【讨论】：

我试图改变它但没有成功。我继续收到同样的错误：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.
抱歉，忘记包装<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 组件。我已经更新了我的答案，如果仍然有错误，请告诉我。
我遇到了同样的错误，我也只是更新了问题中的代码。
是的，几乎相同的问题，已修复，我想知道 '.bind(this)' 是什么，发生了什么。
@sibi 您正在将方法绑定到上下文。但我的例子：this.handleTouchMap.bind(this) 似乎是多余的......

【解决方案2】：

您将open 值作为道具传递给LeftDrawer 组件，如下所示：

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

所以在LeftDrawer 中，这个值是可见的prop，而不是state，所以你应该像这样访问它：

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

【讨论】：

【解决方案3】：

我还没有阅读所有代码，但导致您的错误的一个明显问题是您将多个子级传递给 MuiProvider。将所有内容包装在一个 div 中，如下所示：

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

您应该可以从这里继续。

【讨论】：