問題タブ [react-window]

react-windowリスト要素内で React/MUI ポップオーバーを使用していますが、ポップオーバーを正しく配置できません。常にウィンドウの左上隅に表示されます (コンポーネントは getBoundingClientRctd( を実行できません) ) アンカー要素 [anchorElドキュメント内])。

その問題を一時的に回避するためにanchorPosition、絶対位置を設定できるパラメーターを使用することにしました。私の場合は、ウィンドウのちょうど真ん中です。それもうまくいきません。

Chrome DevTools の値を確認しましたが、すべて問題ないようです (つまり、それを使用しているときに anchorEl を取得します。有効な positionLeft/Top 値を取得します。など...

おそらく、本当に単純なことで、誰かが私が間違っていたことを指摘してくれることを望んでいます。

編集済み: ソリューションの重要な要素

1. Rowコンポーネントは、それを含むコンポーネントの外部で定義する必要があります。
2. <List>コンポーネントには、カスタムitemDataデータを に渡すために使用される属性がありますRow。

編集して、react-window リスト レンダラーを追加しました。

基本的なセットアップは次のとおりです。

ポップオーバー レンダラー

ボタン要素レンダラー

クリックイベントハンドラー

react-window リストレンダラー

パフォーマンスを向上させるために、ツリー コンポーネントを再実装したいと考えています。react-window の FixedSizeList を使用しました。比較的うまく機能しています。100,000 ツリー ノードでも処理できます。

私の問題は、ツリー ノードの小さな三角形をアニメーション化することです。アニメーションを担当する次の css:

アニメーションが機能しません。すべてのリスト要素 div を開いたり閉じたりするたびに再レンダリングされるためです。次に、リストに itemKey プロパティを追加して、React が div を再利用できるようにしました。

どちらも機能しません。div は更新されず、代わりに div 全体が再レンダリングされます。この問題の適切な解決策はありますか? 再レンダリングを防ぐにはどうすればよいですか?

これが全体の例です: https://codesandbox.io/s/a-quick-react-tree-component-based-on-react-window-tyxnm

react-windowというライブラリを使用しています

次のように小道具をその行に渡すと:

次のようなエラーが表示されました。

React.createElement: タイプが無効です -- 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、次のようになりました: ...

それを行う正しい方法はどうですか？

react-windowというライブラリを使用しています

大きなリストと表形式のデータを効率的にレンダリングするためのライブラリです。

これはドキュメントのサンプルコードです:

私がやりたいことは、{Row} を<div>または他のカスタム コンポーネントでラップすることです。

いくつかのスタイリングと折りたたみ遷移を実装したいからです。

単純にこれを行うことはできないことに注意してください。

リスト全体を単一のラッパーコンポーネントでラップするのではなく、すべての単一のリストアイテムをラッパーコンポーネントでラップするためです。

リスト全体を単一のラッパー コンポーネントでラップしたい。

非常に大きなデータをレンダリングするために FixedSizeList を使用しています。react-window のおかげで、すべてがスムーズなプロセスでスムーズな出力を実現しています。

数日間、react-custom-scrollbars を使用して垂直スクロール バーを追加しようとしていますが、簡単に統合して使用できるようにすることができました。しかし、私が数日を費やして最終的にここにいる問題は、固定要素のように、ブラウザーページの最後に垂直スクロールバーを配置することです。これにより、ユーザーは最後まで水平にスクロールする必要がなくなります。リストを縦にスクロールします。

カスタム スクロールバーを画面の右端に配置しました。ただし、水平スクロールは垂直スクロールバーもスクロールします。

コードは、私が意図したことを示しています。

関連CSS: