問題タブ [react-virtualized]

(この質問は、react-virtualizedライブラリに関するものです)

<List>複数のカテゴリのアイテムを表示するために使用するコンポーネントがあります。結果の出力は次のようになります。

「ジャンプ先」リンクを使用して、リスト内の対応するセクションの先頭までスクロールしたいと思います。いくつかスクロールすると、ジャンプ リンクをクリックするとセクションに戻ります。

「星雲」リンクを初めてクリックしたときは正常に機能しますが、その後のクリックでは何も起こりません。これはscrollToIndex小道具であり、最初のクリック後に変化しないためだと思います。使ってみましforceUpdateGridたが、スクロール位置がリセットされないようです。

同じインデックスに連続してジャンプする方法はありますか?

説明

react-virtualized でレンダリングされるアイテムの潜在的に長いリストがありますVirtualScroll。
リスト内の各項目 (行) にはかなりの量の要素があり、そのうちの 1 つがコンテキスト メニューを開きます。react-tetherHTMLでそのメニューをレンダリングしてbody（アイテムがスクロール可能なリストの下部/上部にあるときに非表示にならないように）、ユーザーがリストをスクロールしている間、メニューをアイテムに「固定」したままにしようとしています.
私の問題は、テザー メニューの位置の更新に顕著な遅延があることです。

これまでに行った手順のいくつか:

1. なしで単純なリストをレンダリングしましたVirtualScroll。テザリングされたメニューはスムーズにレンダリングされ、目立ったジャンクはありませんでした. それが私が問題があると結論付けた方法ですreact-virtualized
2. ここで推奨されrowRendererているように、メニュートリガーのみに簡略化しました。
3. shouldComponentUpdate行コンポーネントに実装されています。これにより、認識されるパフォーマンスが大幅に改善され、遅延が大幅に減少しましたが、それでもまだ顕著です.
4. Chrome devtools のタイムラインを確認しました。Grid.jsとの両方によってトリガーされるリフローが表示されtether.jsます。

ライブラリのバージョン:

• react-virtualized v. 7.24.3 (大規模なプロジェクトであり、8.x への移行はまだ準備ができていません)
• 反応テザー v. 0.5.2
• 反応するv。15.2.1

ワーキングデモ

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

スクリーンショット:

列の並べ替えが有効になっている反応仮想化テーブルがあります。私の計画は、filter icon列ヘッダーの隣に追加し、誰かがクリックしたときにMaterial-UI ポップオーバーを実行することです。

これが私がやったことです：私はheaderRendererを有効にしました

headerRenderer= {this.renderHeader}

私の headerRenderer はコンポーネントを返します

ColumnFilterContainer は次のとおりです。

しかし、svg-icon をクリックすると、「TEST」がコンソールに表示されますが、テーブルも再ソートされます。どうすればやりたいことを達成できますか。それは実行可能ですか？

ありがとう

現在、 のようなアイテムのリストがあり<ul><li/><li/>...</ul>、それぞれが でスタイル設定されていdisplay: inline-blockます。アイテムの高さや幅は固定ではありませんが、おそらく固定することもできます。各アイテムにはサムネイル画像と、場合によってはテキストが含まれています。

ウィンドウの幅が変化すると、リストは応答してラップされ、水平スクロールバーはありません。たとえば、リストは 3 つの項目で始まり、すべてがウィンドウ内の行に水平に収まる場合があります。

次に、いくつかの項目が追加され、項目が 2 行目に折り返され始めます。

次に、ウィンドウの幅が変更されると、アイテムが再ラップされます。

何千ものアイテムがある場合、パフォーマンスは確実に低下する可能性があるため、リストを仮想化する方法があるかどうかを確認したかったのです。ドキュメントを読んだところ、これが現在 React Virtualized ライブラリでサポートされているようには見えませんが、確認したかったのです。コンポーネントはCollection近いように見えますが、ウィンドウのサイズが変更されると、幅や高さが動的に変更されるとは思われません。

この種のアイテムのラッピングが可能である場合、実装例はありますか?

List多数のアイテムをレンダリングするために、react-virtualizedのコンポーネントを使用しています。私の実装では、アイテムはセクション化されており、ユーザーが下にスクロールしても現在のセクションが表示されたままになるように、セクション ヘッダーを固定する必要があります。基本的に、スクロール位置が変更されたときにセクションヘッダーを破棄しないように反応仮想化する必要があります（ただし、他のアイテムを破棄し続けます）。これを今すぐ行う方法はありますか？あまりにもクレイジーでない限り、私はハッキングに対してオープンです。

反応仮想化プロジェクトにより、非常に大きなコンポーネント リストを効率的にレンダリングできます。私のプロジェクトでは、リスト アイテムはコンテナー コンポーネント、つまり redux ストアに接続されたコンポーネントです。ID のみを知っており、コンテナー コンポーネントは、本文テキスト、日付、ユーザー名などのすべての関連データをフェッチする責任があります。

私が直面している問題は、これらのコンポーネントの高さを計算することです。React-virtualized には動的な高さを計算するためのCellMeasurer コンポーネントがありますが、CellMeasurer はコンポーネントのデフォルト状態の高さを測定します。これは私のコンテナー コンポーネントでは 0 です。最初のレンダリング時にコンテナー コンポーネントによってデータがまだフェッチされていないためです。時間。

コンテナがコンテンツをロードするときに、コンポーネントの高さを強制的に再計算する方法はありますか?

React-Virtualized はすぐに使用できるアニメーションをサポートしていないようですが、ReactCSSTransitionGroupトランジションを実装するために使用することは可能ですか (そして合理的ですか?)。

私の場合、仮想化されたリストの要素でアニメーションの削除 (不透明度のフェードや高さの縮小など) トランジションを実行したいと考えています。

cdnjs と SystemJS を介して Web アプリケーションで react-virtualized を使用したいと考えています。

私が見たすべての例から、react-virtualized および react ライブラリはローカルにロードされ、Webpack にバンドルされてから Web ページに含まれるようです。SystemJSでインポートするだけで、Webpackなしでcdnjs経由で使用したいと思います。しかし、それを試してみると、React が見つからないというエラーが表示されます。

誰かがこれを以前に試したことがあるかどうか、そしてこれが反応仮想化によってまったくサポートされているかどうか疑問に思っていました。ありがとう。

更新: わかりやすくするために、何をしようとしているのかを示すコードをいくつか含めました。

index.html :

main.jsx :

I have an interactive component inside "react-virtualized" List that acts on clicks. When the component is clicked, the cell transforms i.e. height changes.

My first version of the rowRenderer:

When the message is clicked, a text field appears. This changes the height. What however happens is that component renders over the next message.

This happens because the instance of Message is different in UI and in CellMeasurer as you can see:

The instance created by List will obviously contain correct state but CellMeasurer is not aware of this state.

I tested the following approach but I highly doubt that this is the correct way to do this? I simply cache the UI component instance myself:

This fixes this problem but probably introduces many other issues. What is the correct way to do this?

(I'm aware that using Flux/Redux/global state could fix this but I'm wondering is there some fundamental react-virtualized feature/aspect that I'm missing here.)