用户列表左侧出现蓝点

Question

我有这个render功能：

render() {
    const {classes} = this.props
    return (
      <Paper className={classes.root} elevation={4}>
        <Typography type="title" className={classes.title}>
          All Users
        </Typography>
        <List dense>
         {this.state.users.map((item, i) => {
          const photoUrl = item._id
              ? `/api/users/photo/${item._id}?${new Date().getTime()}`
              : '/api/users/defaultphoto'
          return <Link to={"/user/" + item._id} key={i}>
                    <ListItem button>
                      <ListItemAvatar>
                        <Avatar src={photoUrl} className={classes.bigAvatar}/>
                      </ListItemAvatar>
                      <ListItemText primary={item.name}/>
                      <ListItemSecondaryAction>
                      <IconButton>
                          <ArrowForward/>
                      </IconButton>
                      </ListItemSecondaryAction>
                    </ListItem>
                 </Link>
               })
             }
        </List>
      </Paper>
    )
  }
}

当我最初加载页面时，每个用户的左侧都会出现下面的蓝点：

如果我然后单击指向另一个页面的链接，然后单击浏览器后退箭头返回到用户页面，则用户列表将显示为没有蓝点：

如果蓝点永远不会出现，我会更喜欢。我该怎么做呢？

Answer 1

我今天使用 React material ui v4.6.0 中的 ListItem 组件遇到了同样的问题。

如果将“ListItemSecondaryAction”组件用作“ListItem”组件的最后一个子项，则会显示光盘的默认列表样式类型值。

根据React Material UI Docs，当 ListItemSecondaryAction 用作最后一个子项时，ContainerComponent prop 的值将设置为“li”。

将 ContainerComponent prop 的值更改为其他 elementType（例如“div”）修复了该问题。

        <ListItem button ContainerComponent="div">
      <ListItemAvatar>
        <Avatar src={photoUrl} className={classes.bigAvatar} />
      </ListItemAvatar>
      <ListItemText primary={item.name} />
      <ListItemSecondaryAction>
        <IconButton>
          <ArrowForward />
        </IconButton>
      </ListItemSecondaryAction>
    </ListItem>