Question

我已经将带有应用按钮的材料UI组件演示中的按钮的应用栏代码粘贴到了我的项目中。我想对其进行一些更改，但在使用初始副本粘贴进行构建时遇到了错误。

我收到两个错误

index.js：2177错误：元素类型无效：应使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：符号。

当我删除所有对MenuIcon的引用时，不会发生这些错误，所以一定是这样。

    import React from 'react'
    import PropTypes from 'prop-types';
    import { withStyles } from '@material-ui/core/styles';
    import AppBar from '@material-ui/core/AppBar';
    import Toolbar from '@material-ui/core/Toolbar';
    import Typography from '@material-ui/core/Typography';
    import Button from '@material-ui/core/Button';
    import IconButton from '@material-ui/core/IconButton';
    import MenuIcon from '@material-ui/icons/Menu';

const styles = {
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};

function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.grow}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

另外，将MenuIcon记录到控制台中会得到：

ƒ ShouldUpdate() {
            return _Component.apply(this, arguments) || this;
          }

依次在“源”标签中提供了这一点：

var shouldUpdate = function shouldUpdate(test) {
  return function (BaseComponent) {
    var factory = (0, _react.createFactory)(BaseComponent);

    var ShouldUpdate =
    /*#__PURE__*/
    function (_Component) {
      (0, _inheritsLoose2.default)(ShouldUpdate, _Component);

      function ShouldUpdate() {
        return _Component.apply(this, arguments) || this;
      }

      var _proto = ShouldUpdate.prototype;

      _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
        return test(this.props, nextProps);
      };

      _proto.render = function render() {
        return factory(this.props);
      };

      return ShouldUpdate;
    }(_react.Component);

    if (process.env.NODE_ENV !== 'production') {
      return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
    }

    return ShouldUpdate;
  };
};

var _default = shouldUpdate;
exports.default = _default;

该如何解决？让我知道是否需要更多信息。

Answer 1

在终端中打开您的项目文件夹。运行以下命令：

yarn add @material-ui/icons

或

npm install @material-ui/icons

在您的代码中，您也不会导入反应。您也需要这样做。

无法从@ material-ui / icons

1 个答案: