未捕获的错误：元素类型无效：应为字符串

Question

我已经尝试过 React 文档中的 http://codepen.io/gaearon/pen/VKQwEo?editors=0010，它工作正常。

我想使用 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/