浮动操作按钮组件在React中引发错误

时间:2019-05-24 16:50:39

标签: reactjs material-ui

我对React JS非常陌生。我想在我的应用程序中使用FAB(浮动动作按钮)材质ui react组件。但是,在运行该应用程序时,它会引发编译错误,而我无法弄清楚。我在这里想念什么吗?。

下面是我尝试的代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import FabButton from './Buttons'

ReactDOM.render(
    <FabButton />, 
    document.getElementById('root')
);

我的另一个名为Buttons.js的组件

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import Icon from '@material-ui/core/Icon';
import DeleteIcon from '@material-ui/icons/Delete';
import NavigationIcon from '@material-ui/icons/Navigation';

const useStyles = makeStyles(theme => ({
  fab: {
    margin: theme.spacing(1),
  },
  extendedIcon: {
    marginRight: theme.spacing(1),
  },
}));

function FloatingActionButtons() {
  const classes = useStyles();

  return (
    <div>
      <Fab color="primary" aria-label="Add" className={classes.fab}>
        <AddIcon />
      </Fab>
      <Fab color="secondary" aria-label="Edit" className={classes.fab}>
        <Icon>edit_icon</Icon>
      </Fab>
      <Fab variant="extended" aria-label="Delete" className={classes.fab}>
        <NavigationIcon className={classes.extendedIcon} />
        Extended
      </Fab>
      <Fab disabled aria-label="Delete" className={classes.fab}>
        <DeleteIcon />
      </Fab>
    </div>
  );
}

export default FloatingActionButtons;

我收到的错误如下,

./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js
SyntaxError: /Users/abdul/Documents/UpGrad/Frontend/React/image-viewer-master/node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js: Unexpected token, expected "," (128:10)

  126 | 
  127 |     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
> 128 |       args[_key] = arguments[_key];
      |           ^
  129 |     }
  130 | 
  131 |     _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TouchRipple)).call.apply(_getPrototypeOf2, [this].concat(args)));

0 个答案:

没有答案