問題タブ [react-virtualized]

material-ui の List および ListItem コンポーネントを使用していました。具体的には、ネストされたアイテム機能を使用していました。http://www.material-ui.com/#/components/listを参照 してください。ページの半分ほど下にネストされたリストが表示されます。要点: material-ui は、インデントや展開/縮小矢印などの「ネスト」の問題を処理します。

多くのアイテムを追加すると、リストが非常に遅いことに気付きました。そこで、react-virtualized から AutoSizer を偶然見つけました。問題は次のとおりです。react-virtualized では、コードは行ごとに rowRenderer 関数を提供する必要があります。ネストされた項目のインデントを把握する組み込みの material-ui 機能を失いたくありません。しかし、AutoSizer を使用すると、インデントを把握するためにコードでカスタム作業を行う必要があるようです。また、私のコードは、展開/縮小の矢印を提供する必要があります。現在、material-ui の List/ListItem に無料で付属しています。

ヒントや提案はありますか？

ありがとうございました

Grid コンポーネント (react-virtualized を使用) にカスタム スクロールバー (react-custom-scrollbars: https://github.com/malte-wessel/react-custom-scrollbarsを使用) を統合しようとしています。

この github の問題 ( https://github.com/bvaughn/react-virtualized/issues/143 ) の指示に従おうとしましたが、うまくいきませんでした。

これら 2 つのライブラリを一緒に使用することについての洞察をいただければ幸いです。

更新: react-virtualized の gitter room を検索した後、(react-custom-scrollbars の代わりに) perfect-scrollbar パッケージを使用し、react-virtualized を一緒に使用するという 1 つの提案に従いました。彼らは今のところうまくいっています。

データソースを反応仮想化テーブルにロードするときに、デフォルトの並べ替え列を適切に定義する方法を知りたいです。

現在、並べ替え方法を定義しており、テーブルの列をクリックすると正常に動作しています。

ただし、テーブルが初めて表示されるときにデフォルトの並べ替え値を設定する方法が見つかりませんでした。

これが私たちの実装です。どんな助けでも大歓迎です。

私はこのよう<ScrollSync>に埋め込まれた を使用しようとしています<AutoSizer>:

もちろん、これは非常に単純化されていますが、私の主張を理解していただけると思います (願っています)。したがって、グリッドの onScroll は scrollsync に接続されます。私の問題は、ウィンドウを広くしたためにオートリサイザーがトリガーされるたびに、scrollSync に新しい scrollWidth が通知されないことです。これを修正する方法はありますか？

オプションをロードするために、React-Virtualized-Select を非同期 API 呼び出しで使用しようとしていますが、loadOptions メソッドを完了することはありません。完全なファイルは次のとおりです。

getPlayers の 2 番目のコールバックは、配列の配列をオブジェクトの配列に変換することです。console.log は、次のように配列を出力します。

しかし、検索バーのスピナーがハングし、「読み込み中...」以降のオプションが表示されません。データをより適切に送信する方法がわからない。

React Virtualized の Collection コンポーネントを使用して問題を解決できるかどうか、少し混乱しています。私がやっていることを説明しようとします：

ページで React Virtualized を使用して、アイテムの 2 つのリスト/コレクションを表示しています。同じ幅と高さを持つアイテムを持つ最初のコレクションを完成させました。

最初のコレクションは非常に単純明快で、実装も簡単でした。現在、さまざまなサイズの画像を含む 2 番目のコレクションに取り組んでいます。セルの高さは同じですが、幅が異なるようにしたいです（もちろん、画像のサイズによって異なります）。問題は、行のセル数が常に同じであるとは限らないことです。

これはReact Virtualizedで達成できますか? もしそうなら、「cellSizeAndPositionGetter」でどのように位置を決定できますか?

List (または RV の他のコンポーネント) を UL>LI リストのように、または具体的にはReact Bootstraps ListGroupのようにレンダリングすることは可能ですか?

現在、外部要素 (LIST) を取得して DIV 以外のものをレンダリングするオプションが表示されません。

したがって、私の使用例は、実際には各行が ListGroupItem (BS クラスが適用された li など) であり、コンテナーが ListGroup コンポーネントである必要があるということです。