Question

我想在我的反应网站中使用material-ui.com。但是我无法理解如何添加到我的asp.net网站。

我使用browserify捆绑。但是我无法在其他页面中使用它。我在控制台中出错

未捕获的TypeError：无法读取未定义的属性'toUpperCase'。

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

我的捆绑文件http://www.filedropper.com/materialuibundle

Answer 1

这对我来说也是一个非常普遍的问题。这是因为MaterialUI需要一些基本样式才能工作。您可以在此处找到它们：http://material-ui.com/#/get-started

因此，除非您将这些样式添加到使用material-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正常运行所需的所有样式。现在我将上述模块用作所有Material-UI组件中的mixin。

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文件并添加行mixins：[material]就像我一样，它将全部开始工作：）

捆绑并在另一个文件中使用

1 个答案: