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

【问题标题】：Bundle and use in another file捆绑并在另一个文件中使用
【发布时间】：2015-07-22 06:22:45
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs browserify react-jsx material-ui

【解决方案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] ，它就会开始工作:)

【讨论】：