使用Material UI和React的动态头像

Question

我有一个基本的表单验证应用程序。内置react.js。每个用户都被分配一个个人资料及其信息。我想使用他名字的第一个字母，例如Peter，P，并使用字母p和随机颜色将其显示在头像上。

React-Material-UI有一个示例，但恐怕它仅适用于静态头像。我希望它是动态的。

要求

Given that a user has a first name
And he is logged in
Then he should see a round random colored letter with his first name.

Answer 1

假设您向组件传递了一些user，该对象是具有属性firstName的对象，那么您可以执行类似user.firstName的操作：

<Avatar className={classes.avatar}>{user.firstName.charAt(0)}</Avatar>

classes.avatar来自上面引用的Material-UI示例。