0

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

在查看材料-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;

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

4

2 回答 2

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']
    }
  }
},

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

于 2015-07-23T04:27:40.070 回答
0

好的，我终于用下面的技巧让它工作了：在我的 main.js 中，我这样做：

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

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

return React.createElement (Mui.RaisedButton, { label: 'Default' });
于 2015-07-24T06:37:08.800 回答