如何避免 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) {&nbsp; content = <span>...</span>;} else if(icon) {&nbsp; content = <span>...</span>;} else {&nbsp; content = <span>...</span>;}return <td>{content}</td>;

Answer 2

另一种选择是使用枚举之类的东西来呈现：if (email) {&nbsp;content = 'email';else if (icon) {&nbsp;content = 'icon';} else {&nbsp;content = 'other';}return (&nbsp;<td>&nbsp; &nbsp;{{&nbsp; &nbsp;email: <span>...</span>,&nbsp; &nbsp;icon:&nbsp; <span>...</span>,&nbsp; &nbsp;other: <span>...</span>,&nbsp; &nbsp;}[content]}&nbsp;</td>);这在这里更详细地解释：https ://reactpatterns.js.org/docs/conditional-rendering-with-enum/

Answer 3

我发现提取复杂功能以提高可读性很有用：import React from 'react';// extracted functionalityconst emailAction = (email, icon) => {&nbsp; if (email) {&nbsp; &nbsp; return <span>Do This</span>;&nbsp; } else {&nbsp; &nbsp; if (icon) {&nbsp; &nbsp; &nbsp; return <span>Do That</span>;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return <span>Do Something Else</span>;&nbsp; &nbsp; }&nbsp; }};// your Componentexport const TableData = (props) => {&nbsp; return <td>{emailAction(props.email, props.icon)}</td>;};