添加 material ui 到 React 组件

Question

我正在尝试将 material ui 添加到我的 React 组件中。这是我写的代码。（我的完整代码位于https://github.com/abhitechdojo/MovieLensReact）

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.

Answer 1

在你的 webpack.conf 中：

更改：

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

至：

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

添加 material ui 到 React 组件

Adding material ui to a React Component

reactjs

webpack

babeljs

material-ui