根據源 object 屬性有條件地分配 className

Question

我在 React function 中有一個條件，它有條件地添加了 CSS class。

當我在所有其他值中添加默認值時，狀態將獲得“isUnPublished”class 而不是獲得“默認”class..

如果我在前 2 個值中省略默認值，它將顯示最后一個值的默認 class。

代碼：

狀態.JS：

    const StatusIndicator = (props) => {

    const articleStatus = [

        {
            id: 1,
            name: "published",
            isPublished: false
        },
        {
            id: 2,
            name: "unpublished",
            isUnPublished: false
        },
        {
            id: 3,
            name: "draft",
            isApproved: false
        }
    ]

    return (
        <div className={classes.root}>

 {articleStatus.map(status => <span key={status.id} 
    className={ 
    status.isPublished ? 'published' : 'default' ||
    status.isUnPublished ? 'unpublished' : 'default'|| 
    status.isApproved? 'draft' : 'default'
     }> </span>)}

        </div>
    )
}

export default StatusIndicator;

CSS：

.published {
    background: rgb(75, 210, 143);
    display: flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.unpublished {
    background: rgb(255, 77, 77);
    display: flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.draft {
    background: rgb(255, 204, 103);
    display: flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.default {
    height: 10px;
    display: flex;
    width: 10px;
    background: #c1c1c1;
    border-radius: 50%;
}

Answer 1

您似乎在某種程度上濫用了三元運算符。 我想， 它必須是一些東西，比如：

className={ 
    status.isPublished ? 'published' :
    status.isUnPublished ? 'unpublished' : 
    status.isApproved? 'draft' : 'default'
}

Answer 2

為了更好的可讀性，您可以將 class 名稱計算移到單獨的方法中

const getClassName = status => {
    switch (true) {
        case status.isPublished:
            return 'published';
        case status.isUnPublished:
            return 'unpublished';
        case status.isApproved:
            return 'draft';
        default:
            return 'default';
    }
};

...

return (
    <div className={classes.root}>
        {articleStatus.map(status => (
            <span key={status.id} className={getClassName(status)}></span>
        ))}
    </div>
);