React-Leaflet：点击Circle修改填充透明度实现激活状态

当前代码的核心问题是用了全局布尔状态active，点击任意Circle都会让所有Circle的填充透明度同步变化，没法实现单个Circle的独立激活效果。要实现点击单个Circle切换其激活状态，得记录当前激活的Circle唯一标识（比如城市名），而非用单个布尔值。

修改步骤： #

1. 更新状态定义
   把原来的布尔状态改成记录激活城市名：

const [activeCity, setActiveCity] = useState(null);

2. 调整点击处理函数
   修改sidebarTrigger，接收点击的城市作为参数，点击已激活的城市时取消激活，否则设置为当前城市：

const sidebarTrigger = (city) => {
  setActiveCity(prev => prev === city ? null : city);
};

3. 修正Circle组件的透明度判断与事件绑定
   在Circle的fillOpacity里判断当前item的城市是否等于activeCity来设置透明度；同时函数组件里不需要bind(this)，直接传递参数即可，还要给循环渲染的Circle加key属性：

<MapContainer whenCreated={setMap} center={[selectedRegion['lat'], selectedRegion['long']]} zoom={selectedRegion['zoom']} scrollWheelZoom={true}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {props.regionC.map((item, i) => (
    <Circle 
      key={i}
      eventHandlers={{ 
        click: () => sidebarTrigger(item.city) 
      }}
      center={item.city === 'Johannesburg' || item.city === 'Johhensburg' ? [-26.195246, 28.034088] : [item.lat, item.long]}
      color='#EE7E18'
      fillColor="#EE7E18" 
      fillOpacity={activeCity === item.city ? 0.9 : 0.7}
      weight="0"
      radius={radius}
    />
  ))}
</MapContainer>

补充说明： #

• 列表渲染必须加key属性，这是React的要求，能避免不必要的重渲染和控制台警告。
• 如果需要支持同时激活多个Circle，可以把状态改成数组，存储所有激活的城市名，点击时添加或移除对应城市。

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