Возникли проблемы при использовании Appbar + Drawer (Material UI + ReactJS)

javascript reactjs material-ui

5522 просмотра

3 ответа

386 Репутация автора

Я пытаюсь сделать свое первое приложение с 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.

У вас есть идея, что я делаю не так? Пожалуйста!

С уважением!

ОБНОВИТЬ:

Если я положу <div>обернуть <Appbar>и <Leftdrawer>в App.jsx. Это решает ошибку MuiThemeProvider. Но теперь я получаю следующую ошибку:

Uncaught TypeError: Cannot read property 'open' of null
Автор: Javier Muñoz Источник Размещён: 18.07.2016 05:16

Ответы (3)


8 плюса

9553 Репутация автора

Вы должны сохранить открытое состояние ящика в состоянии 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;
Автор: Alexandr Lazarev Размещён: 18.07.2016 06:26

0 плюса

6 Репутация автора

Вы передаете openзначение как опору LeftDrawerкомпоненту следующим образом:

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

поэтому внутри LeftDrawerзначение this отображается как a prop, а не как state, поэтому вы должны получить к нему доступ следующим образом:

<Drawer open={this.props.open}>
    <MenuItem>Menu Item</MenuItem>
    <MenuItem>Menu Item 2</MenuItem>
</Drawer>
Автор: TheOneYouDontLike Размещён: 19.07.2016 07:45

0 плюса

1 Репутация автора

Я не прочитал весь код, но одна очевидная проблема, которая вызывает вашу ошибку, заключается в том, что вы передаете несколько детей в 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>  
 );}

Вы должны быть в состоянии продолжить отсюда.

Автор: Alex Serban Размещён: 01.09.2017 07:39
Вопросы из категории :
32x32