反応仮想化の階層的なリストのインデックスにスクロールする方法

Question

List componentのreact-virtualizedには、現在表示されていないリスト項目へのスクロールを有効にするプロパティscrollToIndexがあります。

公式tree exampleは、階層的にスタックされたul要素を持つ階層リストを、期待通りに構築します。

インデックスxをスクロールすると、この行にはこの特定のツリー要素に存在する階層全体が含まれます。

私の場合、レベル1の要素はごくわずかです。しかし、レベル3には最大600の要素があります。したがって、レベル3の要素をスクロールして表示できることが重要です。

これらの600個の要素がすべて同じトップレベルのインデックスに含まれているため、scrollToIndexは残念ながら使用できません。

これがうまくいくと私が想像できる唯一の方法は、ul要素の代わりに反応仮想化リスト要素全体を階層的に作成することです。次に、要素をビューscrollToIndexにスクロールするために、各階層レベルのトップダウンから呼び出されます。

どうにかして、これを行うのがより簡単で実現可能な方法でなければならないと感じています。

アイデア？

---

更新：行の高さと

が適用されることを

乗算

• ビルド階層ツリー内のアクティブノード上の行数を数える機能：私はこのアイデアを持っていましたこれはscrolltopのListのコンポーネント

p問題は：スクロールトップは適用されません:-(

私が取り組んでいるコンポーネントです。

Answer 1

あなたの直感はここで正しいです。記述する方法で大きい行の中をスクロールするのにscrollToIndexを使用することはできません。ただし、代わりにscrollTopプロパティを使用できます。 （内部Gridはとにかくスクロールオフセットへのインデックスを変換しています。）

function render ({ scrollToIndex, ...rest }) { 
    // Convert scrollToIndex to scrollStop 
    const scrollTop = 
    rowOffset + // Position of row within List 
    innerOffset // Position of inner target within row 

    return (
    <List 
     scrollTop={scrollTop} 
     {...rest} 
    /> 
) 
} 

PS：これは反応する仮想化の上に構築されたかなりクールなツリーコンポーネントです。あなたはそれが面白いかもしれないと思った：https://fritz-c.github.io/react-sortable-tree/