如何使用打字稿用三元运算符重写代码并做出反应？答案

【问题标题】：How to rewrite the code with ternary operator using typescript and react?如何使用打字稿用三元运算符重写代码并做出反应？
【发布时间】：2022-09-24 12:36:39
【问题描述】：

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 =>
                        //this renders each card
                    )}
                </>
            )}
        </FormField>
    )}
);

当isSSH 和!isActive 时，我想显示除标题3 和标题4 之外的所有卡片。

所以下面是它应该如何工作，如果

!isSSH show all cards
isSSH and isActive show all cards except title3 and title4
isSSH and !isActive dont show any cards.

如果 !isSSH 并且如果 isSSH 返回除 title3 和 title4 之外的所有卡片，则上述 contentFields 方法实际上返回所有卡片。

代码中的这一行

return (
    !isEmpty(values) && (isSSH ? !card.hidden : true)
);

根据隐藏值过滤卡片。

现在要解决此问题，因为我希望我更改了 contentFields 方法，如下所示，

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

上面的代码按我的意愿工作。但是如果代码的一部分更清洁，有人可以帮助我做到这一点。更好的处理方式。有人可以帮我解决这个问题吗？谢谢。

cleaner 是什么意思？
参考：reactjs.org/docs/conditional-rendering.html

标签： reactjs typescript

【解决方案1】：

看起来很近！

const contentFields = React.useMemo(() =>
    contentCards.filter(card => {
        const values = card.fields.filter(
            field => getFieldValue(field) !== null
        );

        // You can save some nesting by returning
        // earlier on the `isEmpty` condition.
        if (isEmpty(values)) {
            return false
        }

        if (!isSSH) return true;

        // as you alreay checked for !isSSH, you
        // won't need to do that again below
        if (!isActive) return !card.hidden;

        // As you've already covered !isSSH and !isActive,
        // the last if isn't needed so you only need a return
        return false;
    }),
    [getFieldValue, isSSH, isActive]
);

【讨论】：

【解决方案2】：

我的建议是我可以在您的 isEmpty 函数中看到冗余。你可以像这样重写你的函数：

if (!isEmpty(values)) {
    if (!isSSH) return true;
    if (!isActive) return !card.hidden; // Executed if(isSSH & !isActive)
    return false; // Only executed if(isSSH & isActive)
}
看，当您在 if(!something) 检查中添加 return 时，只有在相反的情况下才会发生进一步的代码执行（例如 - if(something)）。因此，在进一步的代码中对 if(something) 的任何检查都是多余的。

编辑：在这种情况下，我也不推荐使用三元运算符，因为我相信单行 -> 单动作的理念，这使得代码在快速垂直扫描期间更易于阅读和理解。

编辑 2：您需要在 if(!isEmpty(){...}) 案例之外返回 true/false（根据您的要求）。作为一种实践，你应该有一致的回报。

【讨论】：

100% 这个，为了可读性。更容易阅读，未来你会感谢你的。
你甚至可以放弃return false，因为过滤器的回调将返回 undefined

【解决方案3】：

你的代码看起来很干净，三元看起来很乱。这是三元版本。

!isEmpty(values) && (isSSH ? (isActive ? false : !card.hidden) : true)

【讨论】：