[英]Having trouble using Appbar + Drawer (Material UI + ReactJS)
我正在嘗試使用 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
您應該將抽屜的打開狀態存儲在App
組件的狀態中,並將其作為道具傳遞給Drawer
組件。
應用程序.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;
您將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>
我還沒有閱讀所有代碼,但導致您出錯的一個明顯問題是您將多個孩子傳遞給 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>
);}
您應該可以從這里繼續。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.