复杂的条件渲染

Question

我有2个版本的组件，一个移动响应版本和一个台式机。 现在，呈现任何一个组件之前都需要满足几个条件，如下所示：

{condition &&
    !otherCondition &&
    (size === "small" || size === "extra-small") && (
        <MobileComponent />
    )}

{condition &&
    !otherCondition &&
    (size !== "small" || size !== "extra-small") && (
        <DesktopComponent />
    )}

但是，这似乎不起作用，并且组件的移动版和桌面版均已呈现。 我只会在(size === "small" || size === "extra-small")部分出现问题：

如果尺寸small或尺寸extra small则显示移动组件。

反之亦然...

如果大小不small或大小不extra small则显示桌面组件。

请注意，每当我调整屏幕大小时， small值都会更改。 因此，价值在于，我处理条件的方式存在问题。

Answer 1

我认为这是您打算做的：

{condition &&
    !otherCondition &&
    (size !== "small" && size !== "extra-small") && (
        <DesktopComponent />
    )}

问题是在size =“ small”且您的两个条件都被评估为true的情况下。（在<MobileComponent>很明显，在<DesktopComponent>是因为“ small”实际上不同于“ extra-small”

Answer 2

尝试如下所示的三元运算符

   {condition && !otherCondition && (size === "small" || size === "extra-small") ? <MobileComponent /> : <DesktopComponent />}

Answer 3

(size === "small" || size === "extra-small")可以取反

!(size === "small" || size === "extra-small") 

要么

(size !== "small" && size !== "extra-small") 

请注意， ===和逻辑OR均已更改。

由于两次使用相同的条件，因此使用DRYer和更易读的方式编写它是：

const isMobile = condition && !otherCondition && (size === "small" || size === "extra-small");
...
{isMobile && <MobileComponent />}
...
{!isMobile && <DesktopComponent />}

如果组件相继进行，则应使用三元组：

{isMobile ? <MobileComponent /> : <DesktopComponent />}