Chakra UI：使 HStack 随条件消失答案

【问题标题】：Chakra UI: Make HStack disappear with conditionChakra UI：使 HStack 随条件消失
【发布时间】：2022-01-06 02:34:27
【问题描述】：

我有 2 张卡片，它们具有相同的属性但有一些不同的道具，卡片 1（amountBed、amountBath、面积），卡片 2（面积）。这是我的代码：

<HStack spacing={"25px"}>
    <HStack spacing={"12px"}>
        <BedroomIcon />
        <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
            {amountBed}
        </Text>
    </HStack>
    <HStack spacing={"12px"}>
        <BathroomIcon />
        <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
            {amountBath}
        </Text>
    </HStack>
    <HStack spacing={"12px"}>
        <AreaIcon />
        <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
            {area} m<sup>2</sup>
        </Text>
    </HStack>
</HStack>

如果 amountBed、amountBath 等于 0 或 null，我想消失卧室和浴室 HStack。

【问题讨论】：

标签： node.js reactjs chakra-ui

【解决方案1】：

you can use logical AND operater，那么当它们的值为 FALSY 时，这应该隐藏卧室和浴室。

 <HStack spacing={"25px"}>
    {amountBed && 
        <HStack spacing={"12px"}>
            <BedroomIcon />
            <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
                {amountBed}
            </Text>
        </HStack>}
       {amountBath && <HStack spacing={"12px"}>
            <BathroomIcon />
            <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
                {amountBath}
            </Text>
        </HStack>}
        <HStack spacing={"12px"}>
            <AreaIcon />
            <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
                {area} m<sup>2</sup>
            </Text>
        </HStack>
    </HStack>

【讨论】：