尝试使用 React + TypeScript 项目修复 tslint 错误

Question

我正在开发一个 React + TypeScript 大型应用程序。我正在构建新的组件功能。这是一个打开带有一些过滤器选项的模式的按钮。我为来自here 的SVG 图标添加了<i> 标签。

当我 peek problem 使用我的 Visual Studio 时，我收到以下错误消息：

Type '{ children: string; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.ts(2322)

我该如何解决这个问题？我对 React、TypeScript 和项目本身还是很陌生。 <i> 标签在 toggleArrow() 函数中

FilterOptions 组件：

import './FilterOptions.scss';

import Button from '@material-ui/core/Button';
import Modal from '@material-ui/core/Modal';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import PropTypes, { any } from 'prop-types';
import * as React from 'react';
import FilterCheckboxes from '../FilterCheckboxes/FilterCheckboxes';
import FilterSliders from '../FilterSliders/FilterSliders';

const getModalStyle = (): any => {
  const top = 50;
  const left = 50;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
};

const styles = (theme): any => ({
  paper: {
    position: 'absolute',
    width: theme.spacing.unit * 70,
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[5],
    padding: theme.spacing.unit * 4,
    outline: 'none',
    spacing: theme.spacing,
  },
  buttonMargin: {
    marginRight: '20px',
  },
});

class FilterOptions extends React.Component {
  public static propTypes: { classes: PropTypes.Validator<object>; };
  public state = {
    open: false,
  };

  public handleOpen = (): void => {
    this.setState({ open: true });
  };

  public handleClose = (): void => {
    this.setState({ open: false });
  };
  // function to toggle arrow
  public toggleArrow = (): any => {
    return this.state.open ? (
      <i class='material-icons'>keyboard_arrow_down</i>
    ) : (
      <i class='material-icons'>keyboard_arrow_right</i>
    );
  };
  public render() {
    const { classes }: any = this.props;

    return (
      <React.Fragment>
        <Button 
          className={`filters__button ${classes.buttonMargin}`}
          color='primary' 
          onClick={this.handleOpen}
        >   
        <i class='material-icons'>
          <span>filter_list</span>
        </i>
            <span className='filters__button-message'>Filters</span>
            {this.toggleArrow()}
        </Button>
        <Modal
          aria-labelledby='simple-modal-title'
          aria-describedby='simple-modal-description'
          open={this.state.open}
        >
          <div style={getModalStyle()} className={classes.paper}>
            <Typography variant='h6' id='modal-title'>
              Text in a modal
            </Typography>

            <Typography variant='subheading'>
              Status
            </Typography>

            <FilterCheckboxes />

            <Typography>Submitted</Typography>
            <FilterSliders />

            <Typography>Not Submitted</Typography>
            <FilterSliders />

            <Typography>MARQ</Typography>
            <FilterSliders />

            <Button onClick={this.handleClose}>Close</Button>
          </div>
        </Modal>
      </React.Fragment>
    );
  }
}

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

// We need an intermediary variable for handling the recursive nesting.
const SimpleModalWrapped = withStyles(styles)(FilterOptions);

export default SimpleModalWrapped;

Answer 1

您已将其键入为 html 元素，这意味着您只能分配该界面中的属性。应该是className，而不是class