javascript - Uncaught Error : Element type is invalid: expected a string

Question

我已经尝试过http://codepen.io/gaearon/pen/VKQwEo?editors=0010从 React 的文档来看，它工作得很好。

我想使用material-ui制作一个按钮。这段代码有什么问题？

    import * as React from "react";   
    import * as ReactDOM from "react-dom";
    import {Router, Route, IndexRoute} from "react-router";

    const FlatButton = require('material-ui/FlatButton');


    function Test(props){
    return(
    <div className="test">
    aaa
    <FlatButton label="Default" />
    </div>
    );
    }

    ReactDOM.render(
    <Test

    />
    , document.getElementById('root')
    );

错误:

<小时/>

invariant.js:39 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Test

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Test`

<小时/>

Answer 1

如果您使用material ui组件，那么您需要从material-ui导入MuiThemeProvider、getMuiTheme，并通过以下方式包装您的组件MuiThemeProvider，尝试一下它会起作用:

import React from "react";   
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute} from "react-router";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const getMuiTheme = getMuiTheme({});

import FlatButton from 'material-ui';

 const App = (props) => {

    return (
         <FlatButton label='default'  />
    );
  }

ReactDOM.render(
   <MuiThemeProvider muiTheme={getMuiTheme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('container')
);

检查jsfiddle以获取工作示例:https://jsfiddle.net/u7yvr564/