javascript - 复杂条件渲染

Question

我有 2 个版本的组件，一个移动响应版本和一个桌面版本。现在，在渲染任一组件之前需要满足几个条件，如下所示:

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

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

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

如果尺寸为小或尺寸为特小，则显示移动组件。

反之亦然...

如果大小不是小或大小不是超小，则显示桌面组件。

请注意，每当我调整屏幕大小时，small 值都会发生变化。所以值(value)就在那里，只是我处理条件的方式有问题。

Answer 1

(size === "small"|| size === "extra-small") 可以被否定为

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

或

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

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

由于相同的条件使用了两次，因此更干燥且更具可读性的编写方式是:

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

如果组件连续出现，则应使用三元组:

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