Chakra UI：使HStack有条件消失

Question

我有 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。

Answer 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>

Chakra UI：使HStack有条件消失

Chakra UI: Make HStack disappear with condition

node.js

reactjs

chakra-ui