使用材料的UI與ecmascript6

Question

我絕對發現material-ui，我想通過以下方式

import React from 'react'; 
import mui from 'material-ui'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import PropertiesList from './../components/propertylist.jsx'; 
import Filters from './../components/filter.jsx'; 
import Properties from './../models/PropertiesModel.js'; 
import Toolbar from './../components/toolbar.jsx'; 
var AppBar = mui.AppBar; 
var IconButton = mui.IconButton; 
var NavigationClose = mui.NavigationClose; 
var ThemeManager = new mui.Styles.ThemeManager(); 
var FlatButton = mui.FlatButton; 
injectTapEventPlugin(); 


class TransProperties extends React.Component { 

    constructor(props){ 
    super(props); 
    } 

    render() { 
    return <div className="row"> 
     <div className="col-lg-9"> 
      <AppBar 
       title="Title" 
       iconElementLeft={<IconButton><NavigationClose /></IconButton>} 
       iconElementRight={<FlatButton label="Save" />} /> 
      <PropertiesList url="/properties.json"/> 
     </div> 
     <div className="col-lg-3"> 
      <Filters/> 
     </div> 
    </div>; 
    } 

    handleTouchTap() { 
     alert("oh hi"); 
    } 
} 

export default TransProperties 

添加一些成分，但我得到一個錯誤Uncaught TypeError: Cannot read property 'spacing' of undefined

是指

getStyles: function getStyles() { 
    var spacing = this.context.muiTheme.spacing;...} 

我錯過了什麼？

Answer 1

您可能會遺漏組件上的contextType，這使得muiTheme可用。

你的組件應該是這個樣子：

class ExampleComponent extends React.Component { 

    getStyles() { 
    ... 
    let spacing = this.context.muiTheme.spacing; 
    ... 
    } 

    render() { 
    return (
     <div style={this.getStyles()} /> 
    ); 
    } 
} 

// Don't forget this little nugget 
ExampleComponent.contextTypes = { 
    muiTheme: React.PropTypes.object 
}