之前 webpack 配置的 jsx.后面上了 ts,再到后来开启了 eslint. 没有开启 eslint 的时候都能正常不报错。后面开启后我始终不知道这个应该怎么定义了! 代码:
import * as React from 'react';
import {BaseProps} from '../commonProps';
import {Config, ClassNames, PropTypes} from '../component';
interface IIconProps extends BaseProps {
name: string,
color?: string,
size?: number | string,
onClick?: (e: React.MouseEvent<HTMLElement>) => void
}
const Icon: React.FC<IIconProps> = (props: IIconProps) => {
const prefixCls = `${Config.prefix}-icon`;
const {className, style, name, color, size, onClick} = props;
const iconStyles = (): object => {
const sty: React.CSSProperties = {fontSize: null, color: null};
if (Number.isInteger(size as number)) {
sty.fontSize = `${size}px`;
} else {
sty.fontSize = size;
}
if (color) {
sty.color = color;
}
return Object.assign(sty, {...style});
};
const cls = ClassNames(
`${prefixCls}__${name}`,
className
);
const sty = iconStyles();
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
if (typeof onClick === 'function') {
onClick(e);
}
};
return <i className={cls} style={sty} onClick={handleClick}/>;
};
Icon.propTypes = {
className: PropTypes.string,
style: PropTypes.objectOf(PropTypes.object),
name: PropTypes.string,
color: PropTypes.string,
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
onClick: PropTypes.func
};
export default Icon;
然后 eslint 报
Failed to compile.
[at-loader] ./src/components/icon/Icon.tsx:39:6
TS2339: Property 'propTypes' does not exist on type '(props: any) => DetailedReactHTMLElement<{ className: any; style: any; onClick: (e: any) => void; }, HTMLElement>'.
我怎么定义它都是报这个错特来向大家请教,谢谢!
1
seki 2020-03-19 23:06:54 +08:00
从 ../components 里面 import 的 PropTypes 是啥
|
2
yuang 2020-03-19 23:33:09 +08:00 via Android
用了 ts 之后就不需要 PropTypes 了,直接把后面那坨删掉就好
|
3
dremy 2020-03-20 00:32:56 +08:00 via iPhone
楼主你这么写 FC,性能堪忧啊
举个最简单的例子,onClick 就不用自己再包装一层了吧,真的是负优化… |
4
coderabbit OP |
5
seki 2020-03-20 16:59:34 +08:00
PropTypes 不是直接从 prop-types 里面 import 进来就好了吗
|
6
llb123 2020-03-27 16:15:57 +08:00
用 ts 就是为了不写后面那坨 propTypes 啊。。
|