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") ? <MobileComponent /> : <DesktopComponent />}

Answer 2

我相信这就是您打算做的事情

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

问题在于如果size =“ small”且您的两个条件都被评估为true。（在<MobileComponent>中很明显，在<DesktopComponent>中因为“ small”实际上不同于“小”

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 />}

复杂的条件渲染

3 个答案: