問題タブ [react-leaflet]

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

例: (すべての円は緑で、スライダーの値は 0 です。次に、スライダーを 4 に変更し、(GEOJSON 機能から取得した) 値が 4 より小さいすべての円 (スライダーの値) の色を赤に変更します。残りは同じままです。

サンプル コード: GEOJSON コンポーネントがあります。

^ データは、「スコア」と言う機能を持つすべてのポイントを持つ GEOJSON オブジェクトです。

pointToLayer は次のとおりです。

別のコンポーネントには、変更されるたびに handleChange を呼び出すスライダーがあります。

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

反応リーフレットを使用していて、カスタム マーカー アイコンが必要です。React-leaflet は、Leaflet.Icon オブジェクトを使用してカスタム マーカー アイコンを表示できます。そこで、NPM にリーフレットをインストールし、追加しましimport { L } from 'leaflet';た。

次に追加しました：

私のレンダリング方法に。

しかし、次のエラーが発生し続けますCannot read property 'Icon' of undefined。

カスタム マーカー アイコンを実現するために、次のことも試しました。

しかし、再びCannot read property 'icon' of undefinedエラーが発生しました。

私が間違っていることについてのアイデアはありますか？

私のバージョン: React: 16.0.0 react-leaflet: 1.6.6

マップにレイヤー コントローラーを追加しようとしました。2 つのレイヤーがあり、それぞれに複数のマーカーが含まれています。これは私がやろうとしたことの例です。

ここでコードを実行します: https://www.webpackbin.com/bins/-Kvmu5PPSjeS4lY-qe_E

問題は、レンダリング後、リストに 2 つのレイヤーしかないことです。現在、各レイヤーの各アイテムがリストに表示されています。その理由は、マーカーを配列にプッシュして返すためだと思います。ただし、レイヤーごとに 1 つのリストを表示するための回避策が何であるかはわかりません。