Reactjs 反应useState以更改颜色不工作

我有一张国家地图（SVG），当我将鼠标悬停在上面时，我想突出显示一个省/州，更改其颜色/填充。我实现了这一点，但问题是OnMouseCenter会高亮显示整个地图，而不仅仅是我选择的状态。 我想做的是传递州/省的id，以便只突出显示该州。如何将其添加到此或其他位置：

onMouseEnter={() => setColor("yellow")}

功能组件：

function ColorOnHover() {
const [color, setColor] = useState("#FFF8DC");
return (
<svg>
   <polygon
        id="Paris"
        fill={color}
        stroke="#010101"
        stroke-width="2"
        onMouseEnter={() => setColor("yellow")}
        onMouseOut={() => setColor("#FFF8DC")}
        stroke-miterlimit="10"
        points="1494.844,491.41 ...  />

 <polygon
        id="Azur"
        fill={color}
        stroke="#010101"
        stroke-width="2"
        stroke-miterlimit="10"
        points="638.381,931.285 .../>
  </svg>

  )

函数ColorOnHover（）{
const[color，setColor]=useState（“#FFF8DC”）；
返回(
setColor（“黄色”）}
onMouseOut={（）=>setColor（#FFF8DC”）}
笔划斜接限制=“10”
points=“1494.844491.41…”
如果您没有专门针对该国首都的多边形-您没有任何要突出显示的内容。请提供更具体的示例

此外，您还可以使用纯CSS解决这个问题：只需为需要高亮显示的所有多边形指定一个类，并将：hover样式添加到该类中，以您想要的方式高亮显示多边形


UPD：
然后，您可以尝试使用setState保存省的id，并根据当前选定的id在多边形标记中设置填充属性，如下所示：

const [selectedId, setSelectedId] = useState(null)

...

<polygon
  id="Paris"
  fill={selectedId === 'Paris" ? 'yellow' : ''}
  onMouseEnter={() => setSelectedId('Paris')}
  onMouseOut={() => setSelectedId(null)}
  ...
/>

使用css的解决方案：
1.向svg添加类属性

<svg className="country" ...>



创建和导入css文件

svg.country>多边形{fill:#FFF8DC；}
svg.country>多边形：悬停{填充：黄色；}

创建一个基本设置颜色的变量，并将其传递到多边形组件中。此外，请使用onMouseLeave（）而不是onMouseOut（）

。。。。
const[color，setColor]=useState（“#FFF8DC”）；
常量样式={
颜色：颜色
};
setColor（“黄色”）}
onMouseLeave={（）=>setColor（#FFF8DC”）}
... 
/>

)
我不明白你的答案。你说的“国家首都”是什么意思"? 地图由多个多边形组成。每个省都有自己的多边形。我发布了另一个省的另一个多边形来澄清，然后您可以尝试使用setState保存该省的id，并根据当前selectedId在标记中设置fill属性，类似于：const[selectedId，setSelectedId]=useState（null）。。。好的，谢谢，但这正是我想知道如何实现的！如果我没弄错的话——你用相同的颜色填充了所有的多边形，这样你就出现了所有地图都高亮显示的情况。检查更新后的答案以获得一些可能的解决方案。@Kotfenum谢谢。实际上，我遵循了您的第二个建议使用css类。这是如此简单和明显，我不知道为什么我没有考虑过它！
....
const [color, setColor] = useState("#FFF8DC");

const styles = {
 color: color
};

<polygon
  id="Paris"  
  style={styles}
  onMouseEnter={() => setColor("yellow")}
  onMouseLeave={() => setColor("#FFF8DC")}
  ... 
/>