Eslint 错误：不要嵌套三元表达式答案

【问题标题】：Eslint error : Do not nest ternary expressionsEslint 错误：不要嵌套三元表达式
【发布时间】：2021-04-09 21:02:08
【问题描述】：

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

Do not nest ternary expressions

这是我的代码：

const MyApp = () => {

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

你知道我该怎么做才能解决这个问题吗？我必须使用 if 但我认为在我的情况下我不能......

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案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;
};

【讨论】：

我更新了我的代码，因为我不能在我的代码中这样做：/
你为什么不能这样做？您的新代码实际上使这更容易，不需要外括号

【解决方案3】：

你可以将逻辑移到 JSX 之外，例如

function Component(){

..........
let content = null;
if (var1 && var2) content = < Tag1 / > ;
else if (error) content = < Tag2 / > ;

return <>{content}</>


}

【讨论】：

我更新了我的代码，因为我不能在我的代码中这样做：/
@Tom 你为什么不能在你的代码中这样做？检查更新的答案

【解决方案4】：

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

const MyApp = () => {

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

return (
<>
    {outTag}
</>); 
}

【讨论】：