React JSX - 條件渲染問題

Question

0

我有 state 由下拉菜單控制，當您 select 將設置狀態時。 簡單的。

我想要做的是當沒有選擇任何內容時，有一個通用的“選擇下方”，但如果選擇了某些東西，我想將其設置為選擇的選項。

例如： if(!selectedStyle THEN 'Choose below' ELSE selectedStyle)

selectedStyle 保存選擇的 state，我將如何寫出這個組件？

{selectedStyle>0: selectedSyle || Choose}

但這也是我的組件，有人看到正確的寫法嗎？

<Dropdown>
                        <Dropdown_Button
                        onClick={e => 
                            setisActive(!isActive)}
                        >
                            {selectedStyle>0: selectedSyle || Choose}
                            
                            <span>
                                <KeyboardArrowDownIcon/>
                            </span>
                        </Dropdown_Button>
                        {isActive &&
                        <Dropdown_Content>

                            {styleSelection.map((option) => (
                                <Dropdown_Item onClick={(e) => {
                                    setselectedStyle(option)
                                    setisActive(false)
                                }}
                                >
                                    {option}
                                </Dropdown_Item>
                            ))}
                        </Dropdown_Content>
                        }
                
                    </Dropdown>

Answer 1

您可以將其簡化為{selectedStyle || "Choose style"} {selectedStyle || "Choose style"}