material-ui：未定義ReactTransitionGroup

我試圖在使用gulp/browserify的React項目中包含material-ui。首先，我意識到我必須導航到node_modules/material-ui目錄並在那裏安裝npm，以從JSX文件構建實際的源代碼。material-ui：未定義ReactTransitionGroup

$ 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是我寫的一個組成部分，確實沒有什麼花哨。它包括試圖實例從材料的UI這樣的組件的子組件：

var Mui = require ('material-ui'); 

/* further below, in render(): */ 

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

當我嘗試啓動我的應用程序，我得到的錯誤：「遺漏的類型錯誤：無法未定義讀取屬性‘TransitionGroup’」在node_modules /材料的UI/lib中/上線dialog.js含有：

var ReactTransitionGroup = React.addons.TransitionGroup;

當尋找到材料中的UI源（https://github.com/callemall/material-ui/blob/master/src/dialog.jsx），其原因是顯而易見的：有問題的行上面有某些行：

var React = require('react');

但是據我所知，它應該需要（'react/addons'）才能使用TransitionGroup。

我該如何使用這個庫？

編輯：從官方網站做出反應，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.

材料的UI並沒有這樣做，這可能就是我得到這個錯誤。

在我main.js文件，我說：

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

這段代碼首先運行，我得到一個非空ReactTransitionGroup。稍後，當需要material-ui時，material-ui需要（'反應'）並獲取沒有ReactTransitionGroup的版本。很明顯，材料UI中存在一個錯誤，我會說！

來源

2015-07-20 digory doo

你需要/包括/在文件中要使用任何方式進口的陣營庫TransitionGroup？ Btw。你所附的代碼量至少是不夠的。 – jalooc

我真的不想使用TransitionGroup;它是材料，似乎使用它。我展示的代碼來自material-ui本身，因此您應該在任何使用material-ui的項目中查看完整的源代碼，或者查看GitHub源代碼。 –

我正在使用material-ui，它不會拋出此錯誤。現在我可以說'require（'react'）'沒問題（與你提出的'require（'react/addons'）'相反），因爲'React.addons ....'得到了插件。無論如何，我會繼續考慮解決方案。 – jalooc

好吧，我終於得到它與以下黑客工作：在我的主要。JS，我做的：

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

此外，我不得不糾正明顯的錯誤：

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

來源

2015-07-24 06:37:08

所以你試圖使用按鈕。你會注意到這行var ReactTransitionGroup = React.addons.TransitionGroup;是可以引發錯誤的按鈕文件的第一行 - 其他的只是分配。問題在於材料UI沒有正確加載反應;它與你要求無關。

對我來說，這是因爲我忘了將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-23 04:27:40

我確保material-ui處於require和external狀態，但仍然出現此錯誤。 :( –

實際上，material-ui確實會加載;當我在require（'material-ui'）處放置一個斷點並逐步完成調用時，它顯然會被導入。 –

material-ui：未定義ReactTransitionGroup

回答

相關問題