reactjs - Eslint错误: Do not nest ternary expressions

Question

我正在使用 React.js 开发一个项目，但我在使用 eslint 时遇到了错误:

不要嵌套三元表达式

这是我的代码:

const MyApp = () => {

return (
<>
{(var1 && var2) ? (
          <Tag1 />
        ) : error ? (
          <Tag2 />
        ) : null}
</>); 
}

你知道我该怎么做才能解决这个问题吗？我应该使用 if 但我认为我不能使用 ...

Answer 1

这是由 no-nested-ternaries 引起的eslint 规则。

Linter 规则是关于您应该如何编写代码的建议，它们指出最佳实践但不一定是真正的“错误”。

如果它在这里显示“错误”，那是因为有人(或预先配置的规则集)决定为您的项目启用此规则作为“错误级别”。通常，除非您(或您团队中的某个人)想要禁止这种编码风格，否则无需更改您的代码。从技术上讲，它是完全有效的代码并且可以工作。

如果您在一个团队中，请与您的团队讨论该规则的含义。如果你一个人在你的项目上，请考虑是否需要此规则并在你的 .eslintrc 文件中禁用它。

我个人认为，大多数关于如何编写此代码的建议，而不是在其他答案中给出的，会使它的可读性降低很多，所以如果我是你，我会保留它并禁用该规则。