React-Leaflet通过状态改变来改变GEOJSON形状的颜色

Question

通过API调用，我得到GEOJSON数据（点）。我立即使用circleMaker在传单地图中显示该数据，并将它们全部显示为一种颜色。然后，我为用户提供滑动滑块的选项（以有效负载为滑块值/位置触发动作）。我想要做的是更改某些圆圈的颜色（即那些属性的值低于滑块值的圆圈）。如何在不重新渲染所有圈子的情况下执行此操作？

示例：（所有圆圈均为绿色，并且滑块值均为0，然后将滑块更改为4，并且所有值（从GEOJSON功能获得的值）均小于4（滑块值）的所有圆圈都更改了颜色变为红色，其余保持不变。

示例代码：我有一个GEOJSON组件：

 <GeoJSON
  key={_.uniqueId()}
  data= {this.props.countrySelected.geojson}
  pointToLayer={this.pointToLayer.bind(this)}
  ></GeoJSON>

^数据是一个具有所有点的GEOJSON对象，这些点具有可以说“得分”的特征

这里是pointToLayer：

pointToLayer = (feature, latlng) => {
return L.circleMarker(latlng, {
  color: '#228B22',
  fillColor: '#228B22',
  fillOpacity: .6,
  radius: 3
}).bindPopup(popUpString(feature.properties)); 
}

在另一个组件中，有一个滑块在每次更改时调用handleChange：

handleChange = (value) => {
this.props.sliderChanged(value);
}

[这然后触发一个动作，然后触发一个减小器，该减小器对状态进行适当的更改（即，将状态滑块的值更改为用户刚刚更改的滑块中的值。

Answer 1

查看这两个链接，以获取我提出的解决方案的一些背景信息：

https://github.com/PaulLeCam/react-leaflet/issues/382

http://leafletjs.com/reference-1.2.0.html#geojson

您将需要创建一个像这样的renderGeojson函数，每次重新渲染时都会对其进行重新评估：

function renderCountries(countryGeoJson, sliderValue) {
  return countryGeoJson.map(country => {
    let style = () => { color: 'defaultColor' };

    if (country.score < sliderValue ) {
      style = () => { color: 'red' };
    } else if ( country.score > slidervalue ) {
      style = () => { color: 'green' };

    return (
      <GeoJSON key={field.id} data={field.geoJson} style={style} />
    );
  });
}

现在，将在组件中实际的render函数中调用此函数，每次滑块值更改时都会调用此函数。

伪代码，但类似：

<Map>
   { renderCountries( this.props.countrySelected.geojson, this.state.sliderValue ) }
</Map>

有道理吗？ ：）