我无法在我的反应项目中添加材料 UI答案

【问题标题】：I am not able to add material-ui in my react project我无法在我的反应项目中添加材料 UI
【发布时间】：2016-09-24 19:42:54
【问题描述】：

我得到的错误是： bundle.js:1168 警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。检查AddBillForm的渲染方法。

bundle.js:778 Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查AddBillForm的渲染方法。我正在使用 WEBPACK 和 ES6。请尝试提供一个带有日期选择器材料 UI 的小提琴示例

//MyButton.jsx

var React = require('react');
var RaisedButton =  require('material-ui/RaisedButton');
var MyButton = React.createClass({

    render: function()
    {

        return (
            <Link to={this.props.to}>{this.props.message}</Link>

        );
    }
});

module.exports = MyButton;

//AddBillForm.jsx（这里我使用的是MyButton组件）

var React = require('react');
var ReactDOM = require('react-dom');

var MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');
var GenericInputArea = require('../GenericInputArea');
var MyButton = require('../MyButton')

var AddBillForm=React.createClass({
    render: function()
    {
        return (
             <div className="row">
                <div className="col-md-12 col-sm-12 col-xs-12 biller-name">
                    <GenericInputArea placeholder="Enter your biller name" />
                </div>
                <div className="col-md-12 col-sm-12 col-xs-12 account-id">
                    <GenericInputArea placeholder="Enter 10 digit account Id" />
                    <p>What is my account id? Refer to sample bill below</p>
                </div>
                <MyButton  label = "testing"/>
            </div>
        );
    },
});

module.exports = AddBillForm;

//app.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var RaisedButton =  require('material-ui/RaisedButton');

var GetMyBillsMain = require('./components/getMyBills/GetMyBillsMain');
var AddBillMain = require('./components/addBillDetails/AddBillMain');
var AddBiller =  require('./components/selectBiller/AddBiller');
var BillDetailsMain = require('./components/billDetails/BillDetailsMain')

// Load foundation
require('style!css!bootstrap/dist/css/bootstrap.min.css')

// App css
require('style!css!bootstrapStyles')
require('style!css!customStyles')



ReactDOM.render(
        // <Main></Main>
        <Router history={hashHistory}>
            <Route path="/" component={GetMyBillsMain} />
            <Route path = "selectBiller" component = {AddBiller} />
            <Route path = "addBillDetails" component = {AddBillMain} />
            <Route path = "billDetails" component = {BillDetailsMain} />
        </Router>
        , 
    document.getElementById('main'));

//webpack.config.js（这是我的 webpack 配置）

var webpack = require('webpack');
var ExtractTextPlugin   = require("extract-text-webpack-plugin");


module.exports = {
    entry: [
    'script!jquery/dist/jquery.min.js',
    'script!bootstrap/dist/js/bootstrap.min.js', 
    './app/app.jsx'
    ],
    externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        })
    ],
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },

    resolve: {
        root: __dirname,
        alias: {
            bootstrapStyles : 'bootstrap/dist/css/bootstrap.min.css',
            customStyles: 'app/styles/style.css'
        },

        extensions: ['', '.jsx', '.js' ]
    },
    module : {
        loaders: [
            {
                loader: 'babel-loader',
                query : {
                    presets: [
                        'react', 'es2015'
                    ]
                },
                test: /\.jsx?$/,
                exclude: /(node_modules| bower_components)/
            },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url?limit=10000&mimetype=application/font-woff'
              },
              {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url?limit=10000&mimetype=application/octet-stream'
              },
              {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'file'
              },
              {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url?limit=10000&mimetype=image/svg+xml'
              }
        ]
    }
}

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我遇到了类似的问题，通过更改导入 material-ui 组件的方式解决了这个问题。

尝试改变

var MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');
var RaisedButton =  require('material-ui/RaisedButton');

到

var {MuiThemeProvider} = require ('material-ui/styles');
var {RaisedButton} =  require('material-ui');

以及所有其他 material-ui 组件（如果您有任何其他组件）。

【讨论】：