Eslint错误:不要嵌套三元表达式

Question

我正在使用React.js进行一个项目，使用eslint:时出现了错误

Do not nest ternary expressions

这是我的代码：

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

你知道我该怎么解决吗？我想用if，但我认为在我的情况下我不能。。。

Answer 1

这是由无嵌套的ternaries esint规则引起的。

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

如果它显示一个"；错误"；这是因为有人(或预配置的规则集(决定将该规则启用为"；误差水平"；为您的项目。一般来说，没有必要更改您的代码，除非您(或您团队中的某个人(希望禁止这种类型的编码。从技术上讲，它是完全有效的代码，并且会起作用。

如果你在一个团队中，和你的团队谈谈这个规则的意义。如果您独自参与项目，请考虑是否需要此规则，并在.eslintrc文件中禁用它。

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

Answer 2

我会使用IIFE，这样您就可以使用if/else。

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

对于MyApp组件，这简化为：

const MyApp = () => {
if (var1 && var2) return <Tag1 />;
if (error) return <Tag2 />;
return null;
};

Answer 3

您可以将该逻辑转移到JSX之外，例如

function Component(){
..........
let content = null;
if (var1 && var2) content = < Tag1 / > ;
else if (error) content = < Tag2 / > ;
return <>{content}</>

}

Answer 4

在到达您的退货声明之前处理它：

const MyApp = () => {
let outTag = null;
if (var1 && var2) {
outTag = <tag1 />;
}
else if (error) {
outTag = <Tag2 />;
}
return (
<>
{outTag}
</>); 
}