Question

这是我在导航栏中的通知图标标记，这不会在读取通知后删除带有未读通知计数的徽章：

const notificationsIcon =
     notifications && notifications.length && notifications.filter(n => !n.read).length ?
         <Badge badgeContent={notifications.filter(n => !n.read).length}>
             <NotificationsIcon /> //Material-UI Icon
         </Badge> : <NotificationsIcon />

但这可行：

let notificationsIcon;
        if (notifications && notifications.length > 0) {
            notifications.filter(n => n.read === false).length > 0
                ? (notificationsIcon = (
                    <Badge
                        badgeContent={
                            notifications.filter(n => n.read === false).length
                        }
                    >
                        <NotificationsIcon />
                    </Badge>
                ))
                : (notificationsIcon = <NotificationsIcon />);
        } else {
            notificationsIcon = <NotificationsIcon />;
        }

我真的不明白为什么第二个标记有效而第一个无效，

const mapStateToProps = state => ({
  notifications: state.user.notifications
})

notificationsIcon变量将用Material-UI元素IconButton包装在render方法中，单击该元素将向redux存储发送操作以将通知read属性更改为true，这将更新组件中的通知。

Answer 1

我只是为了测试您的第一种逻辑而尝试过，这有效：

let notifications = [{read: true}, {read: true}]
const notificationsIcon =
     notifications && notifications.length && notifications.filter(n => !n.read).length ?
         "yes" : "no";
         console.log(notificationsIcon);

无法尝试实际的代码，可以提供stackblitz或plunker吗？并尝试以下方法：

const notificationsIcon =
 notifications && notifications.length && notifications.filter(n => !n.read).length ?
     (<Badge badgeContent={notifications.filter(n => !n.read).length}>
         <NotificationsIcon /> //Material-UI Icon
     </Badge>) : (<NotificationsIcon />);

读取通知后通知徽章不会消失吗？

1 个答案: