問題タブ [react-data-grid]

React Data Grid ( https://devexpress.github.io/devextreme-reactive/react/grid/ ) を使用してデータを表示しています。すべて正常に動作しますが、例として と の間に
25 のような値がある場合、特定の行にカスタム スタイル (背景色の変更) を追加したいと思います。 この顧客には 25 ユーザーのような値があります。 次に、この顧客が現在どの層に属しているかを確認したいと思います。背景 に色を付けてやりたいです。例として10があり、最初の行に15があります! 例として20があり、2行目に30があります! その場合、25 は 2 行目の 20 と 30 の間にあるため、2 行目を別の色にしたいと思います。 これは私が今持っているものです：minNumberOfUsersmaxNumberOfUsers


tr
minNumberOfUsersmaxNumberOfUsers
minNumberOfUsersmaxNumberOfUsers

tr値が列グリッドの値の間にあるときに、カスタム クラス名またはスタイルを追加する方法を知っている人はいますか?
ユーザーの現在の価格帯を表示するには、これが必要です。

これは私が達成したいことです:

25 人のユーザーがいて、25 は 1 から 50 の間であるため、上の層は黄色で表示されます。

最近、「react-data-grid」をもう少し調べて、React アプリで基本的なフィルタリング機能を動作させようとしています。これは、私が見ている基本的なフィルタリングの例です。

http://adazzle.github.io/react-data-grid/docs/examples/column-filtering

コードサンドボックスのサンプルコード: https://codesandbox.io/s/w6jvml4v45?from-embed

ほとんどのコード アーティファクトの例を自分のクラス コンポーネントにコピーし、React の useState() に対する同等の解決策を見つけようとしました (私は React にまったく慣れていないため、明らかにクラスでは useState を使用できません)。

私のコードは、このフォーラム用に少し変更されており、テスト データを使用して実際のサーバーからの REST API 呼び出しをシミュレートするために、パブリック JSONPlaceholder Web サイトを指しています。うまくいけば、それを実行できます。ここに私のApp.jsコードがあります:

上記のコード例のコメントに従って、babeljs.io を使用して非矢印ベースの handleFilterChange 関数を生成し、いくつかのログとデバッグ ステートメントを追加しました。

何らかの理由で、ネストされた関数:

呼び出されません。Chrome のデバッガーがブレーク ポイントに到達しないか、追加したデバッグ ログを出力しません。

このログは常に呼び出されます:

内部関数のこのログが呼び出されることはありませんが、これが問題だと思いますか?

非矢印関数ベースの handleFilterChange は、例で使用し、handleFilterChange コードを置き換えたときに機能するため、コード自体は問題なく、すべてのデバッグ ログがコンソールに表示されます。内部関数も呼び出されます。これを機能させるために少し助けがあれば、アロー関数を使用できてうれしいです。

クラス ベースではない Basic Filter バージョンも作成しましたが、サーバーから非常に巨大な JSON データをロードするときに問題が発生します。それ以上は調査しませんでしたが、タイミングの問題だったと思います。

この問題により、テーブルがブラウザに読み込まれ、右上隅にある [Filter Rows] ボタンをクリックできます。これにより、検索編集ボックスが折りたたまれ、文字を入力できますが、文字を入力しているときにテーブルがその場でフィルター処理されません。

高さと幅を拡張できるようにしようとしてRDG Tableいます（拡張のために使用しました）。コンポーネント（私の場合はコンポーネント）に&を動的に提供するためにReactGridLayout使用しています。これで、テーブルのスクロールバーが一番上にあるときに、テーブルの高さと幅が正しく拡張されます。下の画像は、スクロールバーが上部にあるテーブルを示しています 。テーブルを 展開すると、下の画像のようにすべてが正しく機能します。 react-sizemeheightWidthExample

Scrollbar を中間に置いてからテーブルの高さを広げるとすぐに、行が消えます。これらの行は、テーブルを少しだけスクロールするとすぐに表示されます。たとえば、下の画像では、スクロールバーは最初にありません（行6が表示されています）。

テーブルを展開すると、下の画像に示すように、いくつかの行が消えます。

スクロールバーが最初にないときに、展開時に行が消える理由を理解できません。

CodeSandbox リンク: https://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj

編集：テーブルには現在199行が含まれています。