Компоненты с плавающими кнопками действий, генерирующие ошибку в React - PullRequest
Новая
       17

Компоненты с плавающими кнопками действий, генерирующие ошибку в React

0 голосов
/ 24 мая 2019

Я очень новичок в React JS. Я хочу использовать компонент приложения FAB (Floating Action Button) для пользовательского интерфейса в моем приложении. Но при запуске приложения выдает ошибку компиляции, и я не могу понять это. Я что-то здесь упускаю?

Ниже приведен код, который я пробовал.

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)));
...