我收到错误：
控件必须与文本标签相关联。
这段代码是：
<i
role="button"
className={classN}
onClick={this.muteVolume}
onKeyDown={this.muteVolume}
/>
该错误与此 eslint 规则有关。
当使用标签和关联的控件时，该规则是有意义的。就我而言，我根本不需要标签。我可以创建一个，但在我看来这是一种避免出现该错误的解决方法。
问题是什么？
编辑
正如@rickdenhaan 所指出的，要应用的正确规则是这个。
假设我有一个这样定义的类型：
type gridProps = {
itemsArrayFiltered: object[],
cardWidth: number,
cardHeight: number
}
我有一个像这样的 React 组件：
const Grid =
({ itemsArrayFiltered, cardWidth = 280, cardHeight }: gridProps) =>
(whatever)
如果我没有在 gridProps 类型中提供 cardWidth 属性，则会收到错误消息：
类型“gridProps”上不存在属性“cardWidth”。ts(2339)
这是正确的，但问题是：提供默认值 280 是否还不够？我觉得我通过提供数字默认值并在 gridProps 类型中写入数字来重复代码。有没有更好的方法来避免这种情况？
所以我试图比较这两种组合的输出编译代码。
ts-loader
{
test: /\.tsx?$/,
use: 'ts-loader',
}
babel-loader
use: {
loader: 'babel-loader',
options: {
presets:
[
"@babel/preset-react",
"@babel/preset-typescript",
]
}
}
问题
在一个组件中，有一个<Link>（来自 react-router-dom）在 state 属性中传递一个对象。
调用的另一个组件ReceiverComponent是正确接收该对象。但是，下面的代码抱怨消息：
类型“PoorMansUnknown”不可分配给类型“locationStateProps”。类型 'undefined' 不可分配给类型 'locationStateProps'.ts(2322)
type locationStateProps = {
name: string;
}
function ReceiverComponent() {
const location = useLocation();
const myState: locationStateProps = location.state;
return (
<div>
{myState.name}
</div>
);
}
我需要以某种方式为状态提供一种类型，而不会出现此错误。如何进行？
我从 eslint 收到此警告：
X 已定义但从未用于从 react 或 react-native 导入的每种类型。带有FC和的示例ViewProps（见下图）。
这是我的 .eslintrc.js：
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
'airbnb',
"plugin:import/typescript",
],
parser: "@typescript-eslint/parser",
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
"linebreak-style": 0,
"jsx-a11y/label-has-associated-control": ["error", {
"required": {
"some": ["nesting", "id"]
}
}], …reactjs ×4
typescript ×4
eslint ×2
javascript ×2
babel-loader ×1
babeljs ×1
react-router ×1
ts-loader ×1
webpack ×1