我正在尝试在组件附加注释时显示徽章图标。我已经尝试了三种方法，我得到了相同的结果，我觉得很奇怪。哪一个是最好的方法来实现这一点？或者还有别的办法吗？

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;

顺晟科技：

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