Material-UI：更新库后代码无法运行

Question

我是 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/#/get-started/usage

但是我得到了一个不同的错误。任何帮助，将不胜感激。

经过讨论以下是解决方案

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;

Answer 1

这是一个基础组件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;

注意：如果你不想创建额外的组件，你需要在每个使用[=14=的组件中包含getChildContext方法] 组件。

Material-UI：更新库后代码无法运行

Material-UI: Code not working after updating the library

javascript

reactjs

material-ui