我正在尝试使用 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
最佳答案
您应该将抽屉的打开状态存储在App
组件的状态中,并将其作为prop传递给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;
关于javascript - 使用 Appbar + 抽屉时遇到问题(Material UI + ReactJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38429024/