我尝试使用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
答案 0 :(得分:8)
您应该将抽屉的打开状态存储在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;
答案 1 :(得分:0)
您将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>
答案 2 :(得分:0)
我还没有阅读所有代码,但导致错误的一个明显问题是您将多个孩子传递给MuiProvider。将所有内容包装在一个div中,如下所示:
C:\Program Files\kafka_2.11-0.11.0.0>bin\windows\kafka-server-start.bat config\server.properties
你应该可以从这里继续。