javascript - React-Leaflet 状態変化による GEOJSON 形状の色の変化

Question

API 呼び出しを通じて、GEOJSON データ (ポイント) を取得します。そのデータをさっそくサークルメーカーでチラシマップに表示し、一色で表示します。次に、スライダーをスライドするオプションをユーザーに提供します (スライダーの値/場所であるペイロードでアクションをトリガーします)。私がやりたいことは、いくつかの円の色を変更することです (つまり、スライダーの値よりも低い属性を持つ円)。すべての円を再レンダリングせずにこれを行うにはどうすればよいですか?

例: (すべての円は緑で、スライダーの値は 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);
}

これによりアクションがトリガーされ、その後、状態に適切な変更を加えるリデューサーがトリガーされます (つまり、状態スライダーの値が、ユーザーが変更したばかりのスライダーの値に変更されます)。