使用 react 和 material-ui 实​​现徽章

Question

我试图在组件附有注释时显示徽章图标。我尝试了三种方法，得到了相同的结果，但我觉得很奇怪。哪一种是实现这一点的最佳方法？或者有没有其他方法

首先 从“@material-ui/core/Badge”导入徽章；

function NotesBadge({ hasNotes }) {
    
    return (
        <Badge
            anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',}}
            variant="dot"
            color="primary"
            invisible={hasNotes}>
        </Badge>
    );
}

export default NotesBadge;

秒

import Badge from '@material-ui/core/Badge';

function NotesBadge({ hasNotes }) {
    
    return (
        <Badge
            anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',}}
            variant="dot"
            color="primary"
            invisible={!hasNotes}>
        </Badge>
    );
}

export default NotesBadge;

第三

import Badge from '@material-ui/core/Badge';

function NotesBadge({ hasNotes }) {
    if(hasNotes){
    return (
        <Badge
            anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',}}
            variant="dot"
            color="primary"
            invisible={false}>
        </Badge>
    );
}
}
export default NotesBadge;

Answer 1

第二种方法是可行的方法，因为当hasNotes 为假时，Badge 必须是不可见的，因此得名。