### 回答1：
你可以利用
React 的状态来实现这个功能。首先，为每个 div 添加一个唯一的
id。然后，为每个 div 定义一个状态，用于表示它的 finished 属性。当点击某个 div 时，你可以通过它的
id 找到相应的状态，并将 finished 属性取反，然后根据新的 finished 值来更新 div 的 className。
以下是一个示例代码：
```jsx
import { useState } from '
react';
function MyComponent() {
const [divStates, setDivStates] = useState({
div1: { finished: false },
div2: { finished: false },
div3: { finished: false },
// 添加更多的 div 状态
});
function handleClick(
id) {
setDivStates(prevStates => {
const divState = prevStates[
id];
const newDivState = { ...divState, finished: !divState.finished };
return { ...prevStates, [
id]: newDivState };
});
}
return (
<div>
<div
id="div1"
className={divStates.div1.finished ? 'finished' : ''}
onClick={() => handleClick('div1')}
>
Div 1
</div>
<div
id="div2"
className={divStates.div2.finished ? 'finished' : ''}
onClick={() => handleClick('div2')}
>
Div 2
</div>
<div
id="div3"
className={divStates.div3.finished ? 'finished' : ''}
onClick={() => handleClick('div3')}
>
Div 3
</div>
{/* 添加更多的 div */}
</div>
);
}
```
在这个示例
中，我们使用了 useState 来定义 divStates 状态。每个 div 的状态都包含一个 finished 属性，用于表示它是否已完成。当点击某个 div 时，我们会根据它的
id 找到相应的状态，并将 finished 属性取反，然后使用 setDivStates 更新状态。最后，根据每个 div 的 finished 属性来决定它的 className。
### 回答2：
在
React函数组件
中，可以通过使用state来存储每个div的finished值和className。首先，我们可以创建一个数组来存储每个div的信息，包括div的
id、finished值和className。
```javascript
const [divs, setDivs] = useState([
{
id: 'div1', finished: false, className: 'divClass' },
{
id: 'div2', finished: false, className: 'divClass' },
{
id: 'div3', finished: false, className: 'divClass' },
// 其他div的信息
]);
```
接下来，我们可以创建一个处理点击事件的函数，用于
更改相应div的finished值和className。可以通过传递点击的div的
id来标识要
更改的是哪一个div。
```javascript
const handleClick = (
id) => {
setDivs(prevDivs => {
return prevDivs.map(div => {
if (div.
id ===
id) {
div.finished = !div.finished;
div.className = div.finished ? 'finishedDivClass' : 'divClass';
}
return div;
});
});
};
```
然后，我们可以在渲染函数
中使用map函数来遍历div数组，并为每个div创建一个
对应的HTML元素。通过传递div的
id作为参数，将点击事件绑定到每个div上。
```javascript
return (
<div>
{divs.map(div => (
<div
key={div.
id}
className={div.className}
onClick={() => handleClick(div.
id)}
>
{/* div的内容 */}
</div>
))}
</div>
);
```
这样，当点击某个div时，会调用handleClick函数，根据当前div的
id更改相应div的finished值和className，从而实现点击
更改div的样式。再次点击同一个div时，finished值又会
更改回来。
### 回答3：
在
React函数组件
中，可以通过添加类型为string的
id属性来定位不同的div，并实现点击
更改该div
中类型为boolean的finished的值。具体实现步骤如下：
首先，在函数组件
中定义一个状态变量，用来存储每个div
对应的finished值和className值。假设这个状态变量为 divList。
然后，通过使用map函数遍历某个数组，根据数组
中的元素个数生成相应数量的div，并在每个div的className
中设置相同的classname。同时，在每个div
中添加一个点击事件，事件处理函数为一个匿名函数，该匿名函数接收div的
id作为参数。
在点击事件处理函数
中，通过调用useState钩子，获取当前div的finished值和className值。然后，根据当前的finished值判断应该如何
更改className值，并通过设置divList的状态变量来更新div的className值。
最后，在函数组件的返回值
中，使用数组的map函数遍历divList，根据每个div的className值渲染相应的div。
整个过程的关键在于使用
id属性来定位每个div，并通过useState钩子来
更改和更新div的className值和finished值，从而实现点击即切换的效果。
总结起来，我们可以通过在
React函数组件
中使用useState钩子和
id属性来定位和管理无数个相同classname的div，实现点击
更改类型为boolean的finished的值，并根据其值来
更改相应div的classname，再次点击即可再次
更改回来。
最低0.47元/天 解锁文章
1669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
