尝试使用 React + TypeScript 项目修复 tslint 错误
Trying to fix tslint error with React + TypeScript project
我正在开发一个 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;
您已将其键入为 html 元素,这意味着您只能分配该界面中的属性。应该是className
,不是class
我正在开发一个 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;
您已将其键入为 html 元素,这意味着您只能分配该界面中的属性。应该是className
,不是class