阿凡达是具有状态的Material-UI-React组件

Question

我想将头像作为元素放置在Material-UI-Appbar中。该头像将获取LoggedIn用户信息，具体地说，这是第一个字母。并显示它。到目前为止，尽管已在另一个组件中，但我已经完成了。

这是代码：

<CardHeader
avatar={<Avatar>{this.props.data.user.first_name.charAt(0)}</Avatar>}
/>

现在，我想在导航栏组件中复制此逻辑。两个小渔获。

1. 我只想在用户登录时显示头像。使用三元运算符和redux操作isAuthenticated完成了该操作。

           <AppBar
             title="Lenses - Secure Area"
             showMenuIconButton={false}
             iconElementRight={
                 this.props.isAuthenticated ? <FlatButton label="Logout" onClick={(e) => this.logout(e)} /> : ''}/>
   

2. 我希望头像为下拉列表。无论我做什么，似乎都行不通。

您能帮我提供Avatar Dropdown的代码吗？我认为Aft4er可以将它们拼凑在一起。

我正在使用React 15.1以及Material-UI-React 0.20。感谢您的宝贵时间。