我最近将材料-ui从0.14.4更新到版本0.15.4。我不得不添加getMuiTheme()以使其在少数组件中工作。但在其中一个组件中,我收到以下错误,我无法理解发生了什么。
错误:“错误:元素类型无效:期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。检查PortalPage的render方法”
代码段:
var React = require('react'),
mui = require('material-ui'),
Router = require('react-router'),
axios = require('axios'),
AppCanvas = mui.AppCanvas,
AppBar = mui.AppBar,
MenuItem = mui.MenuItem,
//MenuItem = require('material-ui/lib/menus/menu-item')
FlatButton = mui.FlatButton,
PageWithNav = require('./page-with-nav.jsx'),
getMuiTheme = require('material-ui/styles/getMuiTheme').default,
darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme');
//ThemeManager = require('material-ui/lib/styles/theme-manager');
var PortalPage = React.createClass({
mixins: [Router.Navigation],
getChildContext: function() {
return {
muiTheme: getMuiTheme(darkBaseTheme),
};
},
childContextTypes: {
muiTheme: React.PropTypes.object
},
getInitialState: function() {
return {
loggedIn: auth.loggedIn()
};
},
setStateOnAuth: function(loggedIn) {
this.setState({
loggedIn: loggedIn
});
},
componentWillMount: function() {
auth.onChange = this.setStateOnAuth;
// If they aren't logged in, send them back to the home screen
if (!auth.loggedIn()) this.transitionTo('/');
},
render: function() {
var logOutButton = (
<FlatButton
secondary={ true }
label="Log Out"
className="log-out-button"
onTouchTap={ this._onLogOutButtonTouchTap } />
);
var menuItems = [
{
// type: MenuItem.Types.SUBHEADER,
text: 'Portal 1'
},
{
route: 'portal-2',
text: 'Portal 2'
},
{
route: 'portal-3',
text: 'Portal 3'
}
];
// nav bar is different for family users and doctors
if (auth.isUser()) {
menuItems = [
{
// type: MenuItem.Types.SUBHEADER,
text: 'Portal 4'
},
{
route: 'portal-5',
text: 'Portal 5'
}
];
}
return (
<AppCanvas predefinedLayout={ 1 }>
<AppBar
className="mui-dark-theme"
iconElementRight={ logOutButton }
onRightIconButtonTouchTap={ this._onLogOutButtonTouchTap }
zDepth={ 0 } />
<PageWithNav menuItems={ menuItems } />
</AppCanvas>
)
},
_onLogOutButtonTouchTap: function() {
// Delete our user token
auth.logout();
// Tell the server to destroy our session, and clear our auth header
axios.get(this.props.destroySessionUrl);
axios.defaults.headers.common['Authorization'] = "";
this.transitionTo('/');
}
});
module.exports = PortalPage;
任何帮助都将受到高度赞赏。谢谢!