不要 lint 元组中的键答案

【问题标题】：Don't lint keys in tuples不要 lint 元组中的键
【发布时间】：2020-12-18 17:13:55
【问题描述】：

我在我的应用程序中使用元组对来定义带有（比如）标签和内容的有序数据。这对我来说比使用{ label: string, contents: React.ReactNode } 之类的对象更容易阅读。

这工作正常，直到 linting。考虑以下几点：

function FriendList(props: {friends: string[]}): React.ReactElement {
    return <div className="FriendList">{props.friends.join(", ")}</div>;
}


const appData: [string, React.ReactNode][] = [
    ["Birth year", (new Date(1608310316544).getFullYear()],
    ["Friends", <FriendList friends={["Fred", "Sally", "Mary"]} />],
];

function App(): React.ReactElement {
    return <div className="App">{
        appData.map((row, i) => <div className="App__row" key={i}>
            <div className="App__row__label">{row[0]}</div>
            <div className="App__row__content">{row[1]}</div>
        </div>)
    }</div>
}

在这里，我们定义了一些关于某个人的数据，然后想要显示它。对于我们应用程序中的每一行，我们总是只有一个“标签”和一个“内容”。第一行 "Birth year" 工作正常 - 它的内容是一个字符串。第二行 - "Friends" 出现 linting 错误：

Missing "key" prop for element in array eslint(react/jsx-key)

从技术上讲，这是正确的。我在集合中定义了一个 React 元素 - 但不需要键，元组不是 rendered 作为集合。元组中每个元素的兄弟数量永远不会改变，它们的语法由渲染器严格控制。

我想大多数元组都是这种情况（当然是我的所有人）。我喜欢 react/jsx-key 规则 - 我想保留它，但我也不想为元组中包含元素的每一行手动禁用它。

有没有办法为元组禁用此规则？或者可能以某种方式有条件地禁用？

【问题讨论】：

标签： reactjs typescript tuples eslint typescript-eslint

【解决方案1】：

老实说，我认为这是 eslint-react 中的一个错误，您也许应该在 https://github.com/yannickcr/eslint-plugin-react.

你当然可以暂时只做// eslint-disable-next-line react/jsx-key...

【讨论】：

我想到这必须在typescript-eslint 规则集中，但因为JS 无法知道某事是一个元组。我认为对数组中的每个元素都要求一个键是公平的，即使是静态定义的也是如此。