如何避免 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

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

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

Answer 3

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

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/