2015-07-22 2 views
0

Я хочу использовать material-ui.com в своем сайте. Но я не могу понять, как добавить мой сайт asp.net.Связывание и использование в другом файле

Я сверток с browserify.But я не могу использовать его в других моих pages.I взять ошибку в консоли

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined .

var CalisanIslemListesi = React.createClass({ 
 
    contextTypes: { 
 
     router: React.PropTypes.func 
 
    }, 
 
    
 
    render:function(){ 
 
     return (<p><RaisedButton /></p>); 
 
    } 
 
});

Мой файл расслоением http://www.filedropper.com/materialuibundle

ответ

0

Это было очень распространенная проблема для меня тоже. Это происходит потому, что MaterialUI нуждается в некоторых базовых стилях для работы. Вы можете найти их здесь: http://material-ui.com/#/get-started

Поэтому, если вы не добавите этот стиль ко всем компонентам, использующим материал-ui, он отобразит вышеуказанную ошибку, потому что ищет зависимость, которая недоступна. Если вы перейдете к ссылке выше, она покажет вам, какие стили ей нужны. Тем не менее, становится очень утомительно включать эти стили каждый раз, в каждый компонент, который я делаю.

Я использую React Mixins. Они БАЗОВЫЕ частичные компоненты, которые вы можете добавить в свой код компонента. Когда вы добавляете mixin к компоненту, что эффективно происходит, mixin расширяется и добавляется к вашему компоненту. Очень похоже на переменные в конкатенации строк (ужасный пример, я знаю, но это поможет вам понять). Когда вы добавляете переменную в конкатенацию строк, переменная эффективно заменяется ее значением. Это то, что происходит с React Mixins.

Вот что я хотел бы сделать:

Определить material.jsx файл в моем каталоге, который идет как это (Это в основном скопированы с их странице Начало работы):

var React = require('react'), 
    mui = require('material-ui'), 
    ThemeManager = new mui.Styles.ThemeManager(), 
    injectTapEventPlugin = require("react-tap-event-plugin"); 

injectTapEventPlugin(); 

module.exports = { 
    childContextTypes: { 
     muiTheme: React.PropTypes.object 
    }, 

    getChildContext: function() { 
     return { 
      muiTheme: ThemeManager.getCurrentTheme() 
     }; 
    } 
} 

выше это просто mixin, он содержит все стили, требуемые Material-UI для правильной работы. Теперь я просто использую вышеуказанный модуль как mixin во всех компонентах Material-UI.

var React = require('react'), 
    material = require('./material.jsx'), 
    mui = require('material-ui'), 
    FlatButton = mui.FlatButton 

module.exports = React.createClass({ 
    mixins: [material], 

    render: function() { 
     return <FlatButton>Hello</FlatButton> 
    } 
}) 

В вашем коде, если вы сделаете этот material.jsx файл и добавьте Примеси строки: [материал], как я сделал, это будет все начать работать :)

Смежные вопросы