如何在React中为array.map渲染的动态元素配置独立useState状态

解决方案 #

你当前的代码问题是所有渲染出来的元素共用了同一个布尔类型的状态，所以状态变化会触发所有元素同步变更。我们可以将状态改为存储当前处于激活状态的元素唯一ID，即可实现单元素独立激活的效果。

1. 修改状态定义

将原有状态替换为存储激活项目ID的状态：

// 初始值为null，代表所有元素都未激活
const [activeProjectId, setActiveProjectId] = useState(null);

2. 调整渲染与点击逻辑

遍历元素时判断当前项目ID是否和激活ID匹配，来决定是否添加focus类；点击事件传入当前点击项目的ID：

{ projects.map((project, index) => (
    <div className={` ${activeProjectId === project.id ? "focus" : ""} `} key={project.id}>
        <div className="cover" to={"/work/" + project.slug} onClick={ () => setActiveProjectId(project.id) }>
        </div>
    </div>
))}

可选扩展：支持点击已激活元素取消选中

如果需要点击已经激活的元素时取消focus状态，可以将点击事件的逻辑调整为：

onClick={() => setActiveProjectId(activeProjectId === project.id ? null : project.id)}

内容的提问来源于stack exchange，提问作者Johann