如何避免 JSX 中的嵌套三元 ESLint 错误答案

【问题标题】：How to avoid nested ternary ESLint error in JSX如何避免 JSX 中的嵌套三元 ESLint 错误
【发布时间】：2020-10-23 00:48:30
【问题描述】：

我必须这样做：

email ? do_this : icon ? do_that : do_something_else

这可以使用嵌套三元非常简单地完成，但 this ESLint rule 无法做到这一点。

在他们的文档中，他们建议使用 if-else，但我不知道如何在我的情况下实现这一点

该代码适用于一个三进制。

return (
  <td>
    {email ? (
       <span>...</span>
     ) : (
       <span>...</span>
     )}
  </td>

添加嵌套三元将返回 ESLint 错误，使用 if-else 表示 if 是一个意外标记：

return (
  <td>
    {if(email) return ( <span>...</span>);
     else if(icon) return ( <span>...</span>);
     else return ( <span>...</span>);
     }
  </td>

这个问题能解决吗？

【问题讨论】：

我曾经创建一个在这些情况下返回布尔值的函数
@FelixKling，这是项目的规则。我不想禁用规则，但想找到解决方法
你可以这样做：{!!email && ..}，{!email && !!icon && ..}，{<!email && !icon && ..}
这能回答你的问题吗？ How can I avoid nested ternary expressions in my code?

标签： javascript reactjs jsx eslint conditional-operator

【解决方案1】：

我发现提取复杂功能以提高可读性很有用：

import React from 'react';

// extracted functionality
const emailAction = (email, icon) => {
  if (email) {
    return <span>Do This</span>;
  } else {
    if (icon) {
      return <span>Do That</span>;
    } else {
      return <span>Do Something Else</span>;
    }
  }
};

// your Component
export const TableData = (props) => {
  return <td>{emailAction(props.email, props.icon)}</td>;
};

【讨论】：

【解决方案2】：

另一种选择是使用枚举之类的东西来呈现：

if (email) {
 content = 'email';
else if (icon) {
 content = 'icon';
} else {
 content = 'other';
}

return (
 <td>
   {{
   email: <span>...</span>,
   icon:  <span>...</span>,
   other: <span>...</span>,
   }[content]}
 </td>);

这里有更详细的解释：https://reactpatterns.js.org/docs/conditional-rendering-with-enum/

【讨论】：

【解决方案3】：

您可以将单元格内容存储在变量中：

let content;
if(email) {
  content = <span>...</span>;
} else if(icon) {
  content = <span>...</span>;
} else {
  content = <span>...</span>;
}

return <td>{content}</td>;

【讨论】：