React Leaflet：如何动态设置多边形样式？编程改色失效问题

我看了你的代码后，发现问题大概率出在样式的传递方式上——你当前是直接调用style()把返回的静态对象传给<Polygon>组件，而不是传递一个可以动态计算的函数。这就导致只有组件第一次渲染时会计算一次样式，后续selectedPlot变化触发重渲染时，样式并没有被重新计算更新，哪怕你在元素检查里能看到style对象，地图上的多边形也不会同步变色。

具体修复方案 #

你只需要把样式定义成一个函数，然后直接传递这个函数给<Polygon>的style属性，而不是执行后的结果。大多数地图组件库都支持通过函数式style来动态更新样式，组件会在需要重绘时自动调用这个函数获取最新样式。

修改后的代码如下：

render() { 
  const { id, name, geoJSON, zoomLevel, selectedPlot, plotBeingEdited } = this.props; 
  const markerPosition = position(geoJSON); 

  // 定义一个动态计算样式的函数
  const getPolygonStyle = () => {
    // 集中处理样式判断逻辑
    if (selectedPlot === id) {
      return { color: 'red' }; 
    }
    return { color: 'blue' }; 
  }; 

  if (zoomLevel > 14 && plotBeingEdited === id) { 
    return <PlotPolygon id={id} geoJSON={geoJSON} />; 
  } else if (zoomLevel > 14) { 
    return ( 
      <Polygon 
        ref="plot" 
        // 直接传递函数，而非执行后的对象
        style={getPolygonStyle} 
        id={id} 
        positions={[positions(this.props)]} 
        onClick={() => { this.props.selectPlot(id); }} 
      /> 
    ); 
  }

  // 补充zoomLevel <=14时的返回，避免render函数无返回值
  return null;
}

为什么之前的写法无效？ #

你之前的style={style()}是在render执行时立刻调用函数得到一个固定对象，当selectedPlot变化触发组件重渲染时，虽然会重新生成新的样式对象，但如果<Polygon>组件是基于浅比较来判断属性变化（比如只检查对象引用是否改变），或者组件本身要求通过函数式style来触发动态更新，就会导致样式无法同步到地图上。而传递函数的话，组件每次需要绘制多边形时都会调用这个函数，自然就能拿到最新的颜色值了。

另外，你也可以确认下你使用的<Polygon>组件的官方文档，确认style属性是否支持函数类型——如果支持的话，这种写法就是最可靠的动态更新方式。

内容的提问来源于stack exchange，提问作者Boris K