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

Question

我必须做类似的事情：email ? do_this : icon ? do_that : do_something_else这可以使用嵌套三元非常简单地完成，但是这个 ESLint 规则并不能做到这一点。在他们的文档中，他们建议使用 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>有可能解决这个问题吗？

Answer 1

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

let content;

if(email) {

  content = <span>...</span>;

} else if(icon) {

  content = <span>...</span>;

} else {

  content = <span>...</span>;

}

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

Answer 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/

Answer 3

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

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>;

};