Common-Js 和 Material-UI 图标。了解为什么图标无法加载。（反应 Js）

Question

我正在尝试运行以下代码：

"use strict";

var React = require('react');
var Router = require('react-router');
var Link = Router.Link;

var Material = require('material-ui');
var ThemeManager = new Material.Styles.ThemeManager();
var Colors = Material.Styles.Colors;
var dropdown = Material.Icons.NavigationArrowDropDown; //This icon cannot be found

var Home = React.createClass({
    childContextTypes: {
        muiTheme: React.PropTypes.object
    },

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

    componentWillMount: function () {
        ThemeManager.setPalette({
            accent1Color: Colors.cyan500
        });
    },

    render: function () {
        return (
            <div>
                <Material.AppBar title="Test" showMenuIconButton={false}>
                </Material.AppBar>
                <Material.List>
                    <Material.ListItem primaryText={"Queue"} leftIcon={<Material.Icons.NavigationChevronLeft/>} />
                    <Material.ListItem primaryText={"Log"} leftIcon={<Material.Icons.NavigationArrowDropDown/>} />
                    <Material.ListItem primaryText={"Settings"} />
                </Material.List>
                <Material.Paper>
                    <span>This is some text</span>
                    <Material.RaisedButton label="Super Secret Password" primary={true}/>
                </Material.Paper>
            </div>
        );
    }
});

module.exports = Home;

我已经包含了必要的包和代码运行如果我不包含

也没关系

Material.Icons.NavigationArrowDropDown;

我已经导航到 material-ui (0.11.1)，并且该文件作为导出文件确实存在于以下路径中：

lib > svg-icons > Navigation > Arrow_drop_down.js 源码如下：

'use strict';

var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');

var NavigationArrowDropDown = React.createClass({
  displayName: 'NavigationArrowDropDown',

  mixins: [PureRenderMixin],

  render: function render() {
    return React.createElement(
      SvgIcon,
      this.props,
      React.createElement('path', { d: 'M7 10l5 5 5-5z' })
    );
  }

});

module.exports = NavigationArrowDropDown;

但是，在编译和运行应用程序时，它找不到该项目并抱怨它不存在，但另一个项目

Material.Icons.NavigationChevronLeft

找到没有问题。这个文件（不包括我的路由器和 app.js）是我的整个项目。

既然两个文件都在同一个文件夹中，我不明白为什么找到一个引用而另一个找不到？

错误发生在运行时间，jsLint 没有发现它。此外，当删除 listItem 图标时，我的页面可以正确呈现。该问题似乎与此组件直接相关。

附加说明：我已经删除了 var 下拉列表，它只是为了演示如何无法从 Material UI.

中找到导出

tl;dr : Material UI 与另一个图标 class 在同一文件夹中的图标 class 未被拾取。为什么？

Answer 1

如您在 src/index.js, NavigationArrowDropDown isn't being set on Material.Icons, while NavigationChevronLeft is. The component is used in other places 中所见，但从未通过 material-ui 的主要出口公开。

但是，您仍然可以像要求任何其他文件一样要求它：

var NavigationArrowDropDown = require('material-ui/lib/svg-icons/navigation/arrow-drop-down');

查看 README，这似乎是到达单个组件的推荐方法。

Common-Js 和 Material-UI 图标。了解为什么图标无法加载。（反应 Js）

Common-Js and Material-UI Icons. Understanding why Icon won't load. (React Js)

reactjs

commonjs

material-ui

Common-Js 和 Material-UI 图标。了解为什么图标无法加载。 （反应 Js）

Common-Js and Material-UI Icons. Understanding why Icon won't load. (React Js)

reactjs

commonjs

material-ui

Common-Js 和 Material-UI 图标。了解为什么图标无法加载。（反应 Js）