2

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

"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：与另一个 Icon 类位于同一文件夹中的 Material UI Icon 类没有被拾取。为什么？

4

1 回答 1

1

正如您在src/index.js中看到的那样，NavigationArrowDropDownis not 被设置为 on Material.Icons，而NavigationChevronLeftis 。该组件在其他 地方使用，但从未通过material-ui's main export 公开暴露。

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

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

查看README，看起来这是达到单个组件的推荐方式。

于 2015-09-25T07:21:12.587 回答