如何简化反应中的if语句？

Question

如何在 React 中简化这个三元表达式？

{dataIndex ? (
    <>{!obj[i] ? 'N/A' : <>{obj[i][dataIndex] ? obj[i][dataIndex] : 'N/A'}</>}</>
) : (
    <>{!obj[i] ? 'N/A' : obj[i]}</>
)}

显然它太复杂了，我需要简化它。有什么建议吗？也许也没有碎片

Answer 1

使用可选链接和 || 代替条件运算符：

{dataIndex ? (
  obj[i]?.[dataIndex] || 'N/A'
) : (
  obj[i] || 'N/A'
)}

请注意，无需将结果表达式包围在 <> 片段中 - 仅使用表达式本身就足够了。

如果查找 dataIndex 属性 没问题，即使 dataIndex 是错误的——这很可能没问题，除非你有非常奇怪的吸气剂——这可以简化为

{ obj[i]?.[dataIndex] || obj[i] || 'N/A' }