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组件，那么您需要从MuiThemeProvider, getMuiTheme导入material-ui，并将您的组件换行 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/

未捕获的错误：元素类型无效：期望一个字符串

1 个答案: