material-ui: ReactTransitionGroup 未定义答案

【问题标题】：material-ui: ReactTransitionGroup not definedmaterial-ui: ReactTransitionGroup 未定义
【发布时间】：2015-07-20 08:01:49
【问题描述】：

我正在尝试在使用 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' }));

当我尝试启动我的应用程序时，我在 node_modules/material-ui/lib/dialog.js 的行中收到错误：“Uncaught TypeError: Cannot read property 'TransitionGroup' of undefined”：

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 中的一个错误！

【问题讨论】：

您是否需要/包括/以任何方式在您想要使用 TransitionGroup 的文件中导入 React 库？顺便提一句。您附加的代码量至少可以说是不够的。
我真的不想使用TransitionGroup；似乎使用它的是材料用户界面。我展示的代码来自 material-ui 本身，因此您应该在任何使用 material-ui 的项目中看到完整的源代码，或者查看 GitHub 源代码。
我自己使用的是material-ui，它不会抛出那个错误。现在我可以说require('react') 很好（而不是你建议的require('react/addons')），因为React.addons.... 得到了插件。无论如何，我会继续思考解决方案。
你为什么用var React = require ('react/addons');而不是var React = require ('react');？ React 应该引用 React，而不是插件。如果 React 引用了插件，那么后面两行你尝试调用 render() 函数的代码肯定会失败。
哦，看看你是不是 `injectTapEventPlugin();'，这是 MUI 要求的：material-ui.com/#/get-started。

标签： javascript reactjs transitions material-ui

【解决方案1】：

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

对我来说，这是因为我忘记将 material-ui 添加到我的 browserify 包中。在咕噜声中，我的包看起来像。

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”。在我添加它之后解决了这个问题。

【讨论】：

我确保 material-ui 在 require 和 external 中，但我仍然收到此错误。 :(
其实material-ui确实加载了；当我在 require('material-ui') 处设置断点并逐步执行调用时，它显然是导入的。

【解决方案2】：

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

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

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

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

【讨论】：