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

Question

I'm working on a React + TypeScript huge application. I'm building new component feature. It's a button that opens a modal with some filter options. I have included <i> tag for an SVG Icon from here .

When I peek problem using my Visual Studio, I get this error message:

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)

How can I fix this? I'm pretty new to React, TypeScript & the project itself. The <i> tags are in the toggleArrow() function

FilterOptions Component:

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

You've typed it as an html element, which means you can only assign properties that are in that interface. It should be className , not class