Материал-ui: ReactTransitionGroup не определен

Question

Я пытаюсь включить материал-ui в проект React, который использует gulp/browsify. Сначала я понял, что мне нужно было перейти в каталог 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 является компонентом, который я написал, ничего не делает фантазии. Она включает в себя подкомпонент, который пытается создать экземпляр компонента из материала-интерфейса, как это:

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

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

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

Когда я пытаюсь запустить мое приложение, я получаю ошибку: «неперехваченным TypeError: Не удается прочитать свойство„TransitionGroup“неопределенных» в node_modules/материально-щ/Библиотека/dialog.js на линии, содержащий:

var ReactTransitionGroup = React.addons.TransitionGroup; 

при поиске в материально-щ источников (https://github.com/callemall/material-ui/blob/master/src/dialog.jsx), причина становится очевидным: Некоторые линии выше нарушившего линии есть:

var React = require('react'); 

, но, как мне сказали, он должен скорее потребовать («реагировать/дополнять»), чтобы иметь возможность использовать TransitionGroup.

Как я должен использовать эту библиотеку?

EDIT: С официального сайта 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. 

материал-щ не делает этого, что, вероятно, почему я получаю эту ошибку.

В моем файле main.js, я добавил:

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

Этот фрагмент кода выполняется первым, и я получаю ненулевое ReactTransitionGroup. Позже, когда требуется материальный ui, материал-ui требует («реагировать») и получает версию без ReactTransitionGroup. Очевидно, что ошибка в материалах, я бы сказал!

Answer 1

ОК, я, наконец, получил его работу со следующим взломом: В моей основной.JS, я:

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

Кроме того, я должен был исправить очевидную ошибку:

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

Answer 2

Итак, вы пытаетесь использовать кнопку. Вы заметите, что эта строка var ReactTransitionGroup = React.addons.TransitionGroup; является первой строкой в ​​файле кнопок, которая может поднять ошибку - все остальное - это просто назначения. Проблема в том, что материал-ui не реагирует должным образом на реакцию; это не имеет никакого отношения к тому, что вы требуете этого.

Для меня это было потому, что я забыл добавить материал-ui в свой браузерный комплект. В хрюке мой пакет выглядит.

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

Первоначально у меня не было «материала-ui» в требовании. После того, как я добавил его, исправлена ​​эта проблема.