如何用TypeScript和React的三元运算符优化卡片过滤逻辑

问题场景 #

在React+TypeScript项目中，需要根据isSSH和isActive两个状态控制卡片的展示，原有过滤逻辑无法满足需求，修改后的多层if判断不够简洁，希望优化为更清晰的写法。

卡片展示规则 #

• !isSSH：显示所有卡片
• isSSH && isActive：显示除title3、title4外的所有卡片（这两个卡片的hidden属性为true）
• isSSH && !isActive：不显示任何卡片

原有代码（不满足需求） #

const contentCards: any[] = sortBy(
    [
        { title: 'title1', field: /* array of objects */ },
        { title: 'title2', field: /* array of objects */ },
        { title: 'title3', hidden: true, field: /* array of objects */ },
        { title: 'title4', hidden: true, field: /* array of objects */ },
        { title: 'title5', field: /* array of objects */ },
    ]
);

const contentFields = React.useMemo(() => 
    contentCards.filter(card => {
        const values = card.fields.filter(
            field => getFieldValue(field) !== null
        );
        return (
            !isEmpty(values) && (isSSH ? !card.hidden : true) 
        );
    }),
    [getFieldValue, isSSH]
);

return (
    {!isActive && (
        <FormField label="Content" >
            {() => (
                <>
                    {contentFields.map(card =>
                        // 渲染每个卡片的逻辑
                    )}
                </>
            )}
        </FormField>
    )}
);

修改后可工作但不够简洁的代码 #

const contentFields = React.useMemo(() =>
    contentCards.filter(card => {
        const values = card.fields.filter(
            field => getFieldValue(field) !== null
        );
        if (!isEmpty(values)) {
            if (!isSSH) return true;
            if (isSSH && !isActive) return !card.hidden;
            if (isSSH && isActive) return false;
        }
    }),
    [getFieldValue, isSSH, isActive]
);

优化后的简洁写法 #

方案1：逻辑表达式组合法 #

将多层条件合并为一个逻辑表达式，可读性强且简洁：

const contentFields = React.useMemo(() =>
  contentCards.filter(card => {
    const values = card.fields.filter(field => getFieldValue(field) !== null);
    // 先确保values非空，再根据状态判断展示逻辑
    return !isEmpty(values) && (
      !isSSH || (isSSH && isActive && !card.hidden)
    );
  }),
  [getFieldValue, isSSH, isActive]
);

当isSSH && !isActive时，!isSSH和(isSSH && isActive && !card.hidden)均为false，整体表达式返回false，符合"不显示任何卡片"的规则。

方案2：嵌套三元运算符法 #

用三元运算符逐层映射规则，逻辑对应更直观：

const contentFields = React.useMemo(() =>
  contentCards.filter(card => {
    const values = card.fields.filter(field => getFieldValue(field) !== null);
    return !isEmpty(values) && (
      !isSSH ? true : 
      isActive ? !card.hidden : 
      false
    );
  }),
  [getFieldValue, isSSH, isActive]
);

这个写法完全对应预设的三条规则，每一层三元都对应一个状态分支，逻辑清晰易懂。

内容的提问来源于stack exchange，提问作者user19725419