material-ui: ReactTransitionGroup 未定义

Question

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

$ 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;

这段代码先是运行，得到一个非null的ReactTransitionGroup。稍后当 material-ui 为 required 时，material-ui requires ('react') 并得到没有 ReactTransitionGroup 的版本。显然 material-ui 中的错误，我会说！

Answer 1

所以您正在尝试使用该按钮。您会注意到这一行 var ReactTransitionGroup = React.addons.TransitionGroup; 是按钮文件中可能引发错误的第一行 - 其他一切都只是分配。问题是 material-ui 在反应中没有正确加载；跟你没关系 requiring it.

对我来说，这是因为我忘记将 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']
    }
  }
},

本来我在require中没有'material-ui'。我把它加进去后解决了这个问题。

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 未定义

material-ui: ReactTransitionGroup not defined

javascript

transitions

reactjs

material-ui