Question

我正在尝试在使用打字稿的react js应用程序中使用材料ui创建小吃栏警报消息。当我尝试更改快餐栏的过渡方向时，这将引发类型错误。

已从材料ui文档中使用snackbar demo。默认情况下，小吃栏从底部过渡到顶部。我想将其从顶部过渡到底部。 Here他们解释了如何做到这一点。

import IconButton from '@material-ui/core/IconButton';
import Slide from '@material-ui/core/Slide';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import ErrorIcon from '@material-ui/icons/ErrorOutlined';
import InfoIcon from '@material-ui/icons/InfoOutlined';
import CloseIcon from '@material-ui/icons/Close';
import green from '@material-ui/core/colors/green';
import amber from '@material-ui/core/colors/amber';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import WarningIcon from '@material-ui/icons/WarningRounded';
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';

import * as React from 'react';

type AlertMessageProps = {
  index: number;
  type: string;
  message: string;
  onClose: (event: any) => void
};

type AlertMessageStateProps = {
  open: boolean
}

const variantIcon = {
  success: CheckCircleIcon,
  warning: WarningIcon,
  error: ErrorIcon,
  info: InfoIcon,
};

const styles1 = (theme: any) => ({
  success: {
    backgroundColor: green[600],
  },
  error: {
    backgroundColor: theme.palette.error.dark,
  },
  info: {
    backgroundColor: theme.palette.primary.dark,
  },
  warning: {
    backgroundColor: amber[700],
  },
  icon: {
    fontSize: 20,
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing.unit,
  },
  message: {
    display: 'flex',
    alignItems: 'center',
  },
});

const MySnackbarContent: React.FunctionComponent<WithStyles & {
  onClose: any,
  variant: string,
  message: string
}> = (props) => {
  const { classes, message, onClose, variant, ...other } = props;
  const Icon = variantIcon[variant];

  return (
    <SnackbarContent
      className={classes[variant]}
      aria-describedby="client-snackbar"
      message={
        <span id="client-snackbar" className={classes.message}>
          <Icon className={classes[variant]} />
          {message}
        </span>
      }
      action={[
        <IconButton
          key="close"
          aria-label="Close"
          color="inherit"
          className={classes.close}
          onClick={onClose}
        >
          <CloseIcon className={classes.icon} />
        </IconButton>,
      ]}
      {...other}
    />
  );
}

const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
export default class AlertMessage extends React.PureComponent<AlertMessageProps, AlertMessageStateProps> {

  state = {
    open: true
  }

  handleClose = (event: any, reason: string) => {
    if (reason === 'clickaway') {
      return;
    }

    this.setState({ open: false });
  };


  public render() {
    const { message } = this.props;
    return (
      <Snackbar
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        TransitionComponent={<Slide direction="down" />}
        open={this.state.open}
        autoHideDuration={6000}
        onClose={this.handleClose}
      >
        <MySnackbarContentWrapper
          onClose={this.handleClose}
          variant={this.props.type}
          message={message}
        />    
      </Snackbar>
    );
  }
}

这是我写的代码。

出现类型错误

[tsl] ERROR in C:\Users\ssripat\projects\interface\src\components\Alerts\AlertMessage.tsx(118,9)
      TS2322: Type 'Element' is not assignable to type 'string | ComponentClass<any, any> | FunctionComponent<any> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<any>'.
    Type 'Element' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.

我在Snackbar的TransitionComponent中收到tslint警告。当我将鼠标悬停在警告上时，这就是我得到的

(JSX attribute) SnackbarProps.TransitionComponent?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined
Type 'Element' is not assignable to type 'string | ComponentClass<any, any> | FunctionComponent<any> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<any>'.
    Type 'Element' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.ts(2322)
Snackbar.d.ts(29, 3): The expected type comes from property 'TransitionComponent' which is declared here on type 'IntrinsicAttributes & SnackbarProps & { children?: ReactNode; }'

Answer 1

当我使用Snackbar时，我也遇到了与Transition组件相关的类似错误。问题已通过@ material-ui / core 4.1.3解决。 see github issue

给材质ui快餐栏提供过渡组件时，打字稿抛出类型错误

1 个答案: