随机设置 <Avatar> backgroundColor

angus 发表于 Dev

安格斯

我在样式主题中定义了三个 backgroundColor。

avatar: {
    backgroundColor: red[500],
},
orangeAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: deepOrange[500],
},
purpleAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: deepPurple[500],
},

每当加载头像时，我想随机选择其中之一。

<Card>
            <CardHeader
                avatar={
                    <Avatar id="av" aria-label="Recipe"
                        className={classes.avatar}>{this.props.userName.charAt(0).toLocaleUpperCase()}
                    </Avatar>}
                title={this.props.userName} disableTypography={true}/>
            <CardActionArea disabled={this.state.images.length == 1 ? true : false}>
                <CardMedia
                    id={this.props.ownerId}
                    className={classes.media}
                    image={this.state.images[this.state.imageIndex]}
                    onClick={this.handleOnClick}
                />
            </CardActionArea>
        </Card>

任何建议如何做到这一点？

谢谢

旅行技术人员

几种方法来做你想做的事。我的建议：将 3 个类放在一个数组中，每次选择一个 0 到 2 之间的随机数，并分配该类名：

<Avatar className={classes[Math.floor(Math.random() * 3)]}.../>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。