0

我想在我的反应站点中使用 material-ui.com。但我不明白如何添加到我的 asp.net 站点。

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

未捕获的类型错误：无法读取 undefined 的属性“toUpperCase”。

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

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

4

1 回答 1

0

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

因此，除非您将这些样式添加到所有使用 material-ui 的组件中，否则它将显示上述错误，因为它正在寻找不可用的依赖项。如果你去上面的链接，它会告诉你它需要什么样式。但是，每次在我制作的每个组件中都包含这些样式变得非常乏味。

我使用反应混合。它们基本上是可以添加到组件代码中的部分组件。当您将 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] ，它就会开始工作:)

于 2015-07-22T23:23:16.897 回答