Javascript 复杂条件渲染

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

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

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

{条件&&
！其他条件&&
（尺寸==“小”| |尺寸==“超小”）&&(
)}
{条件&&
！其他条件&&
（尺寸！=“小”|尺寸！=“超小”）&(
)}

但是，这似乎不起作用，并且该组件的移动版和桌面版都被呈现。它只会在

（size==“small”| | size==“extra small”）

部分出现问题，我想说：

如果大小为

小

或大小为

超小

，则显示移动组件

反之亦然

如果大小不小于

小

或大小不小于

超小

，则显示桌面组件

---

请注意，每当我调整屏幕大小时，

small

值都会改变。所以这个值就是我做条件的方式有问题。

尝试使用下面的三元运算符

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

{condition&&！otherCondition&&（size==“small”| | size==“extra small”）？：}

我相信这就是你想要做的：

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

{条件&&
！其他条件&&
（尺寸！=“小”和尺寸！=“超小”）和(
)}

问题是在size=“small”的情况下，然后两个条件都被评估为真。（在

中，这是显而易见的，在

中，因为“small”实际上不同于“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 />}

const isMobile=condition&&！otherCondition&&（size==“small”| | size==“extra small”）；
...
{isMobile&&}
...
{！isMobile&&}

如果成分连续，则应使用三元：

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

{isMobile？：}

认为桌面条件应该是如果大小不是

小，并且不是
超小，而不是OR。OR使该条件计算为真，因为如果大小是
小，则
大小！==“超小”
将为真，反之亦然。
{isMobile ? <MobileComponent /> : <DesktopComponent />}