[英]react/prop-types eslint error in typescript react component
我正在尝试设置一个typescript-react-eslint
项目,并且无法通过此样板组件的 eslint 错误:
import * as React from "react";
interface ButtonProps {
children?: React.ReactNode,
onClick?: (e: any) => void,
}
const styles = {
border: "1px solid #eee",
borderRadius: 3,
backgroundColor: "#FFFFFF",
cursor: "pointer",
fontSize: 15,
padding: "3px 10px",
margin: 10
};
const Button: React.FunctionComponent<ButtonProps> = props => (
<button onClick={props.onClick} style={styles} type="button">
{props.children}
</button>
);
Button.defaultProps = {
children: null,
onClick: () => {}
};
export default Button;
错误是:
19:26 error 'onClick' is missing in props validation react/prop-types
20:12 error 'children' is missing in props validation react/prop-types
似乎它在抱怨 html <button>
的接口未定义? 否则它可能是Button
组件本身,但它不应该从我传递的<ButtonProps>
接口获取类型信息吗?
我尝试像这样显式设置children
和onClick
:
Button.propTypes = {
children?: React.ReactNode,
onClick?: (e: any) => void
};
它绕过了 eslint 错误,但组件本身停止工作。 我究竟做错了什么?
PS 这是我的.eslintrc.json
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
}
我最终将组件重写为:
const Button = ({ children, onClick }: ButtonProps) => {
return <button onClick={onClick} style={styles} type="button">
{children}
</button>;
};
: React.FC<ButtonProps>
部分被 eslint 忽略了,所以我决定以更直接的方式提供 prop 类型
此规则对 TypeScript 没有意义,因为您已经在检查类型。
在这个问题中,您找到了一种禁用此规则的简单方法,只需添加您的 eslint 配置:
rules: {
'react/prop-types': 0
}
为了更具可读性,您可以使用“off”而不是“0”。
eslint-plugin-react@^7.25.0
似乎已经解决了那些使用React.FC<IProps>
和react/prop-types
验证规则的问题。
所以而不是
const Example: React.FC<IProps> = (props: IProps) => ...
这现在可以在更新后没有警告的情况下工作
const Example: React.FC<IProps> = (props) => ...
您的答案的更多信息..
首先,这两种方式对于声明类型都是正确的,但是 React.FC 有一些额外的好处。 https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#function-components
在您的场景中,您可能正在使用 eslint-react-plugin ,它为 eslint 推荐了规则 'plugin:react/recommended' ,
检查 proptypes 的规则就是其中之一,检查 typescript 示例。 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
所以 react/prop-types 规则会与 TS Interfaces 冲突,这就是为什么它会显示该错误,一旦添加:ButtonProps,我们就不必提供 React.FC
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.