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' }));

アプリを起動しようとすると、「Uncaught TypeError: Cannot read property 'TransitionGroup' of undefined」というエラーが 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');

しかし、私が言われたように、TransitionGroup を使用できるようにするためには、require('react/addons') を使用する必要があります。

このライブラリをどのように使用すればよいですか?

編集: 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 なしでバージョンを取得します。明らかに material-ui のバグだと思います!

4

2 に答える 2

0

OK、最終的に次のハックで動作するようになりました: 私の 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 に答える