Material-UI:更新库后代码不工作

Material-UI: Code not working after updating the library

本文关键字：代码 工作 更新 Material-UI      更新时间：2023-09-26

我对material-ui相当陌生，一旦我从0.14.4更新到0.15.4，我的代码工作就会遇到麻烦。下面是我的代码片段:

var React = require('react'),
  mui = require('material-ui'),
  LoginDialog = require('./login-dialog.jsx'),
  RaisedButton = mui.RaisedButton,
  MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');

var Index = React.createClass({

  //childContextTypes: {
  //  muiTheme: React.PropTypes.object
  //},
  //
  //getChildContext: function() {
  //  return {
  //    muiTheme: ThemeManager.getCurrentTheme()
  //  };
  //},
  render: function() {
    return (
      <div className="mui-app-canvas home-page-background">
        <RaisedButton
          className="login-button"
          label="Login"
          onTouchTap={ this._handleLoginDialog }
          linkButton={ false } />
        <LoginDialog
          ref="loginDialog"
          loginUrl={ this.props.loginUrl } />
      </div>
    )
  },
  _handleLoginDialog: function() {
    this.refs.loginDialog.show();
  }
});
module.exports = Index;
我得到的错误是

TypeError: this.context.muiTheme is undefined

我已经研究过使用MuithemeProvider和包装我的代码，它在文档中显示的方式:

http://www.material-ui.com//开始/使用

但是我得到一个不同的错误。任何帮助都会很感激。

讨论后的解决方案如下

Material-ui/styles/getMuiTheme.js是从ES2015源代码编译而来的，并且这个函数是默认导出的。

与@activatedgeek和@robertkelp讨论后编辑代码

var React = require('react'),
  mui = require('material-ui'),
  LoginDialog = require('./login-dialog.jsx'),
  RaisedButton = mui.RaisedButton,
  MuiThemeProvider = require('material-ui/styles/MuiThemeProvider'),
  getMuiTheme = require('material-ui/styles/getMuiTheme').default,
  darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme');

var Index = React.createClass({
  getChildContext: function() {
    return {
      muiTheme: getMuiTheme(darkBaseTheme)
    };
  },
  childContextTypes: {
    muiTheme: React.PropTypes.object
  },
  render: function() {
    return (
      <div className="mui-app-canvas home-page-background">
        <RaisedButton
          className="login-button"
          label="Login"
          onTouchTap={ this._handleLoginDialog }
          linkButton={ false } />
        <LoginDialog
          ref="loginDialog"
          loginUrl={ this.props.loginUrl } />
      </div>
    )
  },
  _handleLoginDialog: function() {
    this.refs.loginDialog.show();
  }
});
module.exports = Index;

这是一个基本组件BaseMUI.jsx 

import React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
/**
 * Basic theme bookkeeping for Material UI
 */
class BaseMUI extends React.Component {
  getChildContext() {
    return {
      muiTheme: getMuiTheme(darkBaseTheme)
    };
  }
}
BaseMUI.childContextTypes = {
  muiTheme: React.PropTypes.object
};
export default BaseMUI;

现在，您创建的每个新组件，使用以下代码:

import React from 'react';
import BaseMUI from './BaseMUI';
class MyComponent extends BaseMUI {
  // you component code here
}
export default MyComponent;

:如果你不想创建一个额外的组件，你需要在你使用Material-UI组件的每个组件中包含getChildContext方法

相关文章：