Question

我正在尝试在使用gulp / browserify的React项目中包含material-ui。首先我意识到我必须导航到node_modules / material-ui目录并在那里安装npm，以便从JSX文件构建实际的源。

$ npm install material-ui --save
$ cd node_modules/material-ui
$ npm install

接下来，我在项目中添加了以下几行：

var React = require ('react/addons');
var e = document.getElementById ('react-mount-pt');
React.render (React.createElement (RootFrame.RootFrame, null), e);

RootFrame是我写的一个组件，没什么好看的。它包含一个子组件，它试图从material-ui实例化一个组件，如下所示：

var Mui = require ('material-ui');

/* further below, in render(): */

return React.createElement (Mui.RaisedButton ({ label: 'Default' }));

当我尝试启动我的应用程序时，我收到错误：“未捕获的TypeError：无法在包含以下内容的行中的node_modules / material-ui / lib / dialog.js中读取未定义的属性'TransitionGroup'”

var ReactTransitionGroup = React.addons.TransitionGroup;

在查看material-ui来源（https://github.com/callemall/material-ui/blob/master/src/dialog.jsx）时，原因变得很明显：在违规行上方有一些行：

var React = require('react');

但据我所知，它应该更需要（'react / addons'）以便能够使用TransitionGroup。

我该如何使用这个库？

编辑：来自官方的React网站https://facebook.github.io/react/docs/addons.html

When using the react package from npm, simply require('react/addons')  
instead of require('react') to get React with all of the add-ons.

material-ui不会这样做，这可能就是我收到此错误的原因。

在我的main.js文件中，我添加了：

var React = require ('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;

首先运行这段代码，然后得到一个非null的ReactTransitionGroup。稍后当需要material-ui时，material-ui需要（'react'）并获得没有ReactTransitionGroup的版本。显然，材料中的一个错误 - 我会说！

Answer 1

所以你试图使用按钮。您会注意到此行var ReactTransitionGroup = React.addons.TransitionGroup;是按钮文件中可能引发错误的第一行 - 其他所有内容都只是分配。问题是材料-ui没有正确加载反应;它与你的要求无关。

对我而言，这是因为我忘了在我的browserify包中添加material-ui。在grunt我的包看起来像。

browserify: {
  vendor: {
    src: [],
    dest: 'public/assets/vendor.js',
    options: {
      require: ['react', 'react-router', 'material-ui']
    }
  },
  client: {
    src: ['frontend/**/*.js'],
    dest: 'public/assets/frontend.js',
    options: {
      transform: ['reactify'],
      external: ['react', 'react-router', 'material-ui']
    }
  }
},

最初我没有＆＃39; material-ui＆＃39;在要求。在我添加它之后解决了这个问题。

Answer 2

好的，我终于使用了以下hack：在我的main.js中，我这样做：

var ReactWithAddons = require ('react/addons');
var React = require ('react');
React.addons = ReactWithAddons.addons;

另外，我必须纠正这个明显的错误：

return React.createElement (Mui.RaisedButton, { label: 'Default' });

material-ui：未定义ReactTransitionGroup

2 个答案: