將材料用戶界面添加到React組件

我試圖將材料用戶界面添加到我的反應組件中。這是我寫的代碼。（和我的完整代碼位於https://github.com/abhitechdojo/MovieLensReact）將材料用戶界面添加到React組件

import React from 'react'; 
import mui from 'material-ui'; 

var ThemeManager = new mui.Styles.ThemeManager(); 
var Colors = new mui.Styles.Colors; 

class App extends React.Component { 
    constructor() { 
     super(); 
     ThemeManager.setPalette({ 
      primary1Color: Colors.blue500, 
      primary2Color: Colors.blue700, 
      primary3Color: Colors.blue100, 
      accent1Colors: Colors.pink400 
     }); 
     this.state = { 
      messages : [{id: 1, text: 'Hi'}, {id: 2, text: 'Hello'}, {id: 3, text: 'World'}, {id: 4, text: 'test'}] 
     }; 
    } 

    static childContextTypes = { 
     muiTheme: React.PropTypes.object 
    }; 

    getChildContext() { 
     return { 
      muiTheme: ThemeManager.getCurrentTheme() 
     }; 
    } 

    render() { 
     var messageNodes = this.state.messages.map((message) => { 
      return (<div key={message.id}>{message.text}</div>); 
     }); 
     return (<div>{messageNodes}</div>); 
    } 
} 

export default App;

我.babelrc文件看起來像

{ 
    presets: ["es2015", "react"], 
    "plugins": ["transform-class-properties"] 
}

但是當我運行的WebPack它給出了一個錯誤

ERROR in ./src/controls/App.jsx 
Module build failed: SyntaxError: /Users/abhishek.srivastava/MyProjects/MovieLensReact/src/controls/App.jsx: 
Missing class properties transform. 
    19 | } 
    20 | 
> 21 | static childContextTypes = { 
    |^
    22 |  muiTheme: React.PropTypes.object 
    23 | }; 
    24 | 
    at File.buildCodeFrameError (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-core/lib/transformation/file/index.js:408:15) 
    at NodePath.buildCodeFrameError (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/index.js:148:26) 
    at pushBody (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:277:20) 
    at buildBody (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:244:10) 
    at run (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:151:10) 
    at PluginPass.ClassExpression (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/index.js:63:60) 
    at newFn (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/visitors.js:293:19) 
    at NodePath._call (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/context.js:74:18) 
    at NodePath.call (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/context.js:46:17) 
    at NodePath.visit (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/context.js:104:12) 
@ ./src/main.js 13:11-40 
webpack: bundle is now VALID.

來源

2016-01-24 Knows Not Much

在你的WebPack。 conf：

更改：

loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']

到：

loaders: ['react-hot', ‘babel-loader’]

來源

2016-01-24 00:40:15 Aaleks

將材料用戶界面添加到React組件

回答

相關問題