Question

第一次使用ReactJS，我正在寻找可在我的应用中使用的一些组件。看来，Material-UI将涵盖组件的所有基础。

我的问题是Material UI是否与更新版本的ReactJS兼容

我一直在尝试一个项目，我试图包括一张桌子。我已经安装了NPM材料-ui，但是在运行代码时遇到了麻烦

这是代码

var React = require('react');
var Table = require('material-ui/lib/table/table');
var TableHeader = require('material-ui/lib/table/table-header');
var TableRow = require('material-ui/lib/table/table-row');
var TableHeaderColumn = require('material-ui/lib/table/table-header-column');
var TableBody = require('material-ui/lib/table/table-body');
var TableRowColumn = require('material-ui/lib/table/table-row-column');




var Home = React.createClass({

render: function() {
    return (
         <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderColumn>ID</TableHeaderColumn>
                <TableHeaderColumn>Name</TableHeaderColumn>
                <TableHeaderColumn>Status</TableHeaderColumn>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableRowColumn>1</TableRowColumn>
                <TableRowColumn>John Smith</TableRowColumn>
                <TableRowColumn>Employed</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>2</TableRowColumn>
                <TableRowColumn>Randal White</TableRowColumn>
                <TableRowColumn>Unemployed</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>3</TableRowColumn>
                <TableRowColumn>Stephanie Sanders</TableRowColumn>
                <TableRowColumn>Employed</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>4</TableRowColumn>
                <TableRowColumn>Steve Brown</TableRowColumn>
                <TableRowColumn>Employed</TableRowColumn>
              </TableRow>
            </TableBody>
          </Table>
    );
}

});

module.exports = Home;

当我运行代码

时，我得到24个这样的警告

＆＃34; React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查Home＆＃34;

的渲染方法

和错误

＆＃34;未捕获的不变违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：object。检查`Home＆＃34;

的渲染方法

任何指导都将不胜感激。

固定代码

var React = require('react');
var MUI = require('material-ui').default;
var Table = MUI.Table;
var TableHeader = MUI.TableHeader;
var TableRow = MUI.TableRow;
var TableHeaderColumn = MUI.TableHeaderColumn;
var TableBody = MUI.TableBody;
var TableRowColumn = MUI.TableRowColumn;




var Home = React.createClass({

render: function() {
    return (
         <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderColumn>ID</TableHeaderColumn>
                <TableHeaderColumn>Name</TableHeaderColumn>
                <TableHeaderColumn>Status</TableHeaderColumn>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableRowColumn>1</TableRowColumn>
                <TableRowColumn>John Smith</TableRowColumn>
                <TableRowColumn>Employed</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>2</TableRowColumn>
                <TableRowColumn>Randal White</TableRowColumn>
                <TableRowColumn>Unemployed</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>3</TableRowColumn>
                <TableRowColumn>Stephanie Sanders</TableRowColumn>
                <TableRowColumn>Employed</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>4</TableRowColumn>
                <TableRowColumn>Steve Brown</TableRowColumn>
                <TableRowColumn>Employed</TableRowColumn>
              </TableRow>
            </TableBody>
          </Table>
    );
}

});

module.exports = Home;

材料 - UI和ReactJS协同工作

0 个答案: