如何在ReactJS中获得选定的div元素颜色更改和存储每个选定的Div元素的状态？

在ReactJS中获得选定的div元素颜色更改和存储每个选定的Div元素的状态，可以通过以下步骤实现：

创建一个React组件，包含需要选定的div元素。可以使用useState钩子来存储每个选定的div元素的状态。

import React, { useState } from 'react';

const ColorChangeComponent = () => {
  const [selectedDivs, setSelectedDivs] = useState([]);

  const handleDivClick = (divId) => {
    // 切换选定的div元素的状态
    if (selectedDivs.includes(divId)) {
      setSelectedDivs(selectedDivs.filter(id => id !== divId));
    } else {
      setSelectedDivs([...selectedDivs, divId]);
    }
  };

  return (
    <div>
      <div
        id="div1"
        onClick={() => handleDivClick("div1")}
        style={{ backgroundColor: selectedDivs.includes("div1") ? "red" : "initial" }}
      >
        Div 1
      </div>
      <div
        id="div2"
        onClick={() => handleDivClick("div2")}
        style={{ backgroundColor: selectedDivs.includes("div2") ? "blue" : "initial" }}
      >
        Div 2
      </div>
      {/* 其他div元素 */}
    </div>
  );
};

export default ColorChangeComponent;

在上述代码中，我们使用useState钩子来创建selectedDivs状态变量，用于存储选定的div元素的状态。初始状态为空数组。
在每个需要选定的div元素上，添加onClick事件处理函数handleDivClick。该函数根据当前div元素的id来判断是否选定，并更新selectedDivs状态变量。
在每个需要选定的div元素上，使用内联样式来根据选定状态设置背景颜色。如果该div元素的id存在于selectedDivs数组中，则设置背景颜色为选定状态的颜色，否则设置为初始颜色。

这样，当用户点击选定的div元素时，其背景颜色会更改，并且选定的div元素的状态会存储在selectedDivs数组中。你可以根据需要进一步处理选定的div元素的状态或执行其他操作。

注意：以上代码仅为示例，实际应用中可能需要根据具体需求进行修改和扩展。