react函数组件中有无数个相同classname的div，通过类型为string的id定位不同的div，实现点击更改类型为boolean的finished的值，从而更改相应div的className，再次点击又更改回来

### 回答1：
你可以利用 React 的状态来实现这个功能。首先，为每个 div 添加一个唯一的 id。然后，为每个 div 定义一个状态，用于表示它的 finished 属性。当点击某个 div 时，你可以通过它的 id 找到相应的状态，并将 finished 属性取反，然后根据新的 finished 值来更新 div 的 className。

以下是一个示例代码：

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。

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。

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上。

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，再次点击即可再次更改回来。