React-window: Windowscroller

WindowScroller واحدًا من تلك المؤلمة للحفاظ على المكونات. أرى فائدة ذلك ، لكنني لست متأكدًا من أنني مهتم بالالتزام بالحفاظ على واحدة أخرى. أفضل بدلاً من ذلك ، إن أمكن ، إنشاء مكون خارجي (ونشره بشكل منفصل) يقوم بتنفيذ هذه الوظيفة أعلى نافذة التفاعل.

قد أكون على استعداد لإجراء بعض التغييرات على نافذة التفاعل لدعم مثل هذا المكون ، إذا كان موجودًا ، اعتمادًا على مدى تعقيده.

ربما تكون البداية الجيدة بالنسبة لشخص ما (أنت؟) لإرسال PR الذي يضيفه إلى هذه المكتبة مباشرة - حتى نتمكن من معرفة مدى تعقيد النشر بشكل منفصل.

إذا كنت حقًا في حاجة إلى نافذة سكرولر ، يمكنك فقط استخدام واحد من رد الفعل-Virtalized.

WindowScroller
https://codesandbox.io/s/vy620pkzzy

WindowScroller مع محتوى ديناميكي
https://codesandbox.io/s/xvl23p7okp

أعتقد أنني سأغلق هذه المشكلة في الوقت الحالي لأنني لا أخطط لاتخاذ أي إجراء بشأنها - وكانت الخطة طويلة المدى (في رأيي على الأقل) وحدة منفصلة على أي حال. ما زلت سعيدًا لإلقاء نظرة على اقتراح رغم ذلك!

HuPascalSenn ، هل تستخدم WindowScroller من رد الفعل الافتراضي بنجاح؟ شكرا مقدما

مرحبًا مرة أخرى PascalSenn ، هل يمكنك المساعدة؟

شكرا مقدما

تضمين التغريدة
لإصلاح مشكلتك ، يجب عليك الرجوع إلى المستند وهو ما يوضح أنه بالنسبة إلى الشبكة ، يجب عليك تقديم توقيع معلّم آخر غير القوائم
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

آمل أن يساعد هذا ...
ملاحظة: اعتني بحيلة CSS لـ PascalSenn

// This height will override the window.innerHeight set in JSX : height={window.innerHeight}
.window-scroller-override {
  height: 100% !important;
}

لتقديم المساعدة ، إليك نموذج مع عمل الشبكة: https://codesandbox.io/s/wq301o8qz7

إذا كنت حقًا في حاجة إلى نافذة سكرولر ، يمكنك فقط استخدام واحد من رد الفعل-Virtalized.

WindowScroller
https://codesandbox.io/s/vy620pkzzy

WindowScroller مع محتوى ديناميكي
https://codesandbox.io/s/xvl23p7okp

لمعلوماتك لأي شخص يفكر في هذه الأمثلة ، يرجى ملاحظة أن استخدام window.innerWidth و window.innerHeight لا يأخذ في الحسبان وجود أشرطة التمرير. يجب خصم حجم شريط التمرير ، الذي يختلف باختلاف المتصفح / الجهاز (وما إذا كان هذا المحتوى كافياً لعرضه).

bvaughn ، هل يمكننا التحكم في سرعة

kgregory ، أي فكرة عن كيفية عمل هذا مع InfiniteLoader ؟ في المثال الذي قدمته ، يستخدم WindowScroller 's onScroll مرجعًا تم إنشاؤه في النطاق الخارجي وتطبيقه على List ، ولكن إذا كنت تستخدم InfiniteLoader ، استدعاء الطفل مقابل InfiniteLoader يحصل على ref من وسيطاته ويطبق _that_ على List . لا يبدو أنه من الممكن استخدام نفس المرجع لكلا المطلبين. كل ما جربته حتى الآن لم ينجح.

mrdanimal انظر هذه الإجابة للإشارة إلى مرجع القائمة مع المرجع الذي يأتي من InfiniteLoader: https://github.com/bvaughn/react-window/issues/417#issuecomment -583867845

لقد تمكنت من إصلاح بعض المشكلات في codeandboxPascalSenn ، ولكن انتهى بي الأمر بصنع اثنتين منها لاختبار بعض الأشياء ذات الصلة بمشروعي. أنا أنشر هذا هنا في حال كان مفيدًا لأي شخص.

مثال FixedSizeList: https://codesandbox.io/s/react-window-with-windowscroller-fixedsizelist-xujgi
مثال VariableSizeGrid: https://codesandbox.io/s/react-window-with-windowscroller-variablesizegrid-7kbwn

لا يبدو أنه يعمل مع DynamicSizeList. لا أحد يعرف الحل؟ سيوفر لي الكثير من المتاعب