Блокировка рендеринга конкретного компонента - PullRequest
Новая
       6

Блокировка рендеринга конкретного компонента

0 голосов
/ 23 марта 2019

Как помешать методу рендеринга отображать только аватар (id = "av")?

По сути, идея состоит в том, чтобы обновить изображение в CardMedia через onClick. Поскольку компонент будет визуализирован снова, цвет Аватара изменится. 

 const { classes } = this.props;
    this.state.images = this.state.appData.map(element => element.imageUrl);
    const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.redAvatar];

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

Спасибо

...