[英]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.