Question

我有使用Angular material的Angular项目。由于性能问题，我决定使用ngReact directive将React集成到我的项目中。所以一切正常。我安装的BTW与bower而不是npm做出反应。

所以现在我尝试整合React Material UI以便能够在React中使用像drop-down-menu这样的材料组件而不是Angular材质中的md-select。

今天我用jsx命令编译反应jsx文件，如：

jsx -w -x jsx app/scripts/components/  app/scripts/components/build/

到目前为止一切顺利。

React Material UI没有bower但npm。所以我安装了material-ui所以下一步是什么？

如何使用反应组分？我需要一些js文件将其包含在我的index.html中。

当我尝试加入node_modules/material-ui/index.js时，我收到错误：

index.js：3未捕获的ReferenceError：未定义导出

这是index.js内容：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToolbarTitle = exports.ToolbarSeparator = exports.ToolbarGroup = exports.Toolbar = exports.Toggle = exports.TimePicker = exports.TextField = exports.TableRowColumn = exports.TableRow = exports.TableHeaderColumn = exports.TableHeader = exports.TableFooter = exports.TableBody = exports.Table = exports.Tab = exports.Tabs = exports.Snackbar = exports.Stepper = exports.StepLabel = exports.StepContent = exports.StepButton = exports.Step = exports.SvgIcon = exports.Subheader = exports.Slider = exports.SelectField = exports.RefreshIndicator = exports.RaisedButton = exports.RadioButtonGroup = exports.RadioButton = exports.Popover = exports.Paper = exports.MenuItem = exports.Menu = exports.MakeSelectable = exports.ListItem = exports.List = exports.LinearProgress = exports.IconMenu = exports.IconButton = exports.GridTile = exports.GridList = exports.FontIcon = exports.FloatingActionButton = exports.FlatButton = exports.DropDownMenu = exports.Drawer = exports.Divider = exports.Dialog = exports.DatePicker = exports.CircularProgress = exports.Checkbox = exports.CardText = exports.CardTitle = exports.CardMedia = exports.CardHeader = exports.CardActions = exports.Card = exports.Badge = exports.Avatar = exports.AutoComplete = exports.AppBar = undefined;

var _AppBar2 = require('./AppBar');

var _AppBar3 = _interopRequireDefault(_AppBar2);

// ....   


var _ToolbarTitle3 = _interopRequireDefault(_ToolbarTitle2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.AppBar = _AppBar3.default;
exports.AutoComplete = _AutoComplete3.default;
exports.Avatar = _Avatar3.default;
exports.Badge = _Badge3.default;

  //....

exports.ToolbarSeparator = _ToolbarSeparator3.default;
exports.ToolbarTitle = _ToolbarTitle3.default;

有没有人解决/使用这种方法？

如何在Angular项目中集成材料-ui React？

0 个答案: