javascript - Material-ui:ReactTransitionGroup 未定义

Question

我正在尝试将material-ui包含在使用gulp/browserify的React项目中。首先，我意识到我必须导航到 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' }));

当我尝试启动我的应用程序时，出现错误:“Uncaught TypeError: Cannot read property 'TransitionGroup' of undefined” in node_modules/material-ui/lib/dialog.js 包含以下内容的行:

var ReactTransitionGroup = React.addons.TransitionGroup;

当查看material-ui源代码( https://github.com/callemall/material-ui/blob/master/src/dialog.jsx )时，原因变得显而易见:有问题的行上方有一些行:

var React = require('react');

但据我所知，它应该需要 require('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;

首先运行这段代码，我得到一个非空的ReactTransitionGroup。稍后，当需要material-ui时，material-ui需要('react')并获取没有ReactTransitionGroup的版本。我想说，这显然是material-ui 中的一个错误!

Answer 1

所以您正在尝试使用该按钮。您会注意到这一行 var ReactTransitionGroup = React.addons.TransitionGroup; 是按钮文件中可能引发错误的第一行 - 其他所有内容都只是分配。问题是material-ui在react中没有正确加载；它与您需要它无关。

对我来说，这是因为我忘记将material-ui 添加到我的browserify 包中。在 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']
    }
  }
},

最初我的需求中没有“material-ui”。我添加它后解决了这个问题。