材质-UI和ReactJS一起工作

第一次使用ReactJS，我正在寻找一些可以在我的应用程序中使用的组件。材料界面似乎涵盖了组件的所有基础

我的问题是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;

---

Material UI 0.14.1引入了一个回归，使其与CommonJS require（）不兼容。

您能否详细说明一下，因为这是我学习ReactJs的方式，我需要做什么来代替require？似乎您可以使用

require

，因为它在0.14.2中已修复。如果你使用0.15.0-alpha2，就有了。因此，请检查您的材质UI版本。我使用0.15.0-alpha.2，然后向所有材质UI要求添加

。默认值

：

var Table=require（'Material-UI/lib/Table/Table'）。默认值
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;