javascript - 用户列表左侧出现蓝点

Question

我有这个渲染函数:

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 属性的值更改为其他元素类型(例如“div”)解决了该问题。

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