时间戳

首页 > 解决方案 > 使用 Material UI 和 React 的动态头像

javascript - 使用 Material UI 和 React 的动态头像

问题描述

我有一个基本的表单验证应用程序。在 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.

标签： javascriptreactjsreduxmaterial-ui

解决方案

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

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

取自classes.avatar您上面引用的 Material-UI 示例的位置。

推荐阅读