material-ui:错误:元素类型无效(更新到版本0.15.4后)

时间:2016-08-26 10:52:54

标签: reactjs material-ui

我最近将材料-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;

任何帮助都将受到高度赞赏。谢谢!

0 个答案:

没有答案