react里做一个修改效果_React动态修改className的值

应用场景：

在网页初始化时，第一列表有蓝色底层；

当点击随机一个列表，该列表变成蓝色底层，并去掉之前有蓝底的列表。

效果图如下所示：

问题：

在初始化时，为一个列表设置蓝底。

在点击一个列表时，移除之前列表蓝底，并着色蓝底。

解决：

:hover，:active等伪类无法满足需求。通过操作ClassName的值，来控制列表的样式；设置一个变量pre，用于保存上一个蓝底的列表的id值(初始化为第一个)。

本文内容如下 ：

项目环境配置

使用document和evt操作节点

参考网站

1. 项目环境配置

设置项目环境。由于是React项目，在全局环境中安装:create-react-app ，然后运行:

npx create-react-app my-app //创建一个my-app的项目

2.使用document和evt操作节点

设置列表数据

通过unid库来设置唯一id,并设置数据，如下所示：

import uuid from 'uuid';

const items = [

{

"id": uuid(),

"title": "European Aluminu