文章/答案/技术大牛

发布

社区首页 >问答首页 >意外函数表达式--使用带有警报的MUI Snackbar组件时出现的ESLint错误

问意外函数表达式--使用带有警报的MUI Snackbar组件时出现的ESLint错误
EN

Stack Overflow用户

提问于 2022-02-01 17:12:33

回答 1查看 207关注 0票数 0

我希望按照正式文档中的示例创建一个使用MUI警报的定制的MUI Snackbar，但是ESlint向我展示了这个错误：

error  Unexpected function expression  prefer-arrow-callback
error  Prop spreading is forbidden     react/jsx-props-no-spreading

在守则的这一部分：

const Alert = React.forwardRef(function Alert(props, ref) {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});

我用npx eslint . --fix来解决这个问题，但现在我得到了：

error  Component definition is missing display name  react/display-name
error  Prop spreading is forbidden                   react/jsx-props-no-spreading

这是我的完整代码

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert from '@mui/material/Alert';

const Alert = React.forwardRef(function Alert(props, ref) {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});

export default function CustomizedSnackbars() {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  return (
    <Stack spacing={2} sx={{ width: '100%' }}>
      <Button variant="outlined" onClick={handleClick}>
        Open success snackbar
      </Button>
      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
          This is a success message!
        </Alert>
      </Snackbar>
    </Stack>
  );
}

javascript

reactjs

material-ui

eslint

snackbar

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-17 15:25:41

这是你的盲点错误

error  Unexpected function expression  prefer-arrow-callback
error  Prop spreading is forbidden     react/jsx-props-no-spreading
error  Component definition is missing display name  react/display-name

偏好-箭头-回调:在前面使用此=>

const Alert = React.forwardRef((props, ref) => {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});

反应/显示-名称

const Alert = () => {
  .... 
}
Alert.displayName = "Alert";

react/jsx-道具-不扩散

如果您不想禁用它，则必须列出所有的MuiAlert道具并将其传递出去。

const Alert = React.forwardRef((props, ref) => {
  const {
    action,
    children,
    classes,
    closeText,
    color,
    icon,
    iconMapping ,
    onClose,
    event,
    role,
    severity,
    sx,
    variant = "filled,
  } = props;
  return <MuiAlert ref={ref} elevation={6} variant={variant} action={action} ... />;
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70944713

复制

相似问题

问意外函数表达式--使用带有警报的MUI Snackbar组件时出现的ESLint错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问意外函数表达式--使用带有警报的MUI Snackbar组件时出现的ESLint错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问意外函数表达式--使用带有警报的MUI Snackbar组件时出现的ESLint错误
EN