React-window: دعم المحتوى المقاس في الوقت المناسب

العمل قيد التقدم لـ MVP متاح على https://github.com/bvaughn/react-window/compare/master...issues/6

أستخدم هذا في mui-downshift وما زلت أستخدم حاليًا UNSAFE_componentWillReceiveProps ، على الرغم من أنني أخطط لمحاولة النقل إلى react-window في المستقبل القريب (بمجرد توفر ارتفاع المحتوى الديناميكي).

هل هذه آلية قابلة لإعادة الاستخدام في UITableView في IOS？

luoboding أنا لا أفهم سؤالك. هل يمكن أن تتطور؟

bvaughn آسف يا صديقي ، لغتي الإنجليزية ليست جيدة جدًا.

لدي مشكلة في مشروعي ، لدي آلاف الخيارات في عنصر محدد ، يصبح الأمر بطيئًا جدًا ومكتظًا عند إعادة تحميل الصفحة ، حاولت كتابة مكون لتحسينه ، كنت مطور IOS ، أعرف آلية قابلة لإعادة الاستخدام في UITableView في IOS ، إذا كنت بحاجة إلى عنصر تحديد ارتفاع 500 بكسل ، فأنا أقوم بتكوين ارتفاع عنصر الخيار إلى 100 بكسل ، لذلك أحتاج فقط إلى إنشاء (Math.floor (500/100)) عدد عنصر الخيار وسعة قائمة الانتظار (قائمة انتظار مصدر البيانات المعروضة حاليًا ) ، عندما أقوم بالتمرير لتحديد عنصر لأعلى أو لأسفل ، فقط ادفع أو انطلق إلى قائمة الانتظار لإعادة عرضه.

أريد استيراد نافذة رد الفعل في مشروعي ، هل يعمل كما ذكرت؟

ما تصفه هو كيفية عمل نافذة التفاعل (والنافذة ، أو استبعاد الانسداد ، بشكل عام). لا يتعلق الأمر بهذه المشكلة حقًا. يتعلق هذا بقياس محتوى الإطارات في الوقت المناسب. في حالتك ، يكون للكائنات ارتفاع ثابت - لذا يمكنك استخدام المكون FixedSizeList : https://react-window.now.sh/#/examples/list/fixed -size

جميل أن نرى رسو معالجتها أصلاً في رد الفعل نافذة.

بالمناسبة ، آسف إذا رفعت الحد قليلاً على الرسوم البيانية… 😅

bvaughn متى ستطلق هذه الميزة ، أنا أبحث عن ذلك

لقد نشرت الإصدار 1.0.0 بدون هذه الوظيفة لأنني أواجه مشكلة في إيجاد الوقت (والطاقة) لإنهاء هذا الآن. لا تزال تخطط لإضافته في المستقبل. لا يوجد تقدير للوقت.

يبدو أن "قائمة الحديد" الخاصة ببوليمر تستخدم أسلوبًا مشابهًا لما أقترحه هنا: https://github.com/domenic/infinite-list-study-group/blob/master/studies/Polymer-iron-list.md # الافتراضي -التحجيم

سيكون هذا مفيدًا لنا حقًا ، في الوقت الحالي يبدو أنه يتعين علينا إبقاء CSS متزامنًا مع منطق المكون الذي يكرر حساب الارتفاع فقط لتمريره إلى القائمة الافتراضية.

kevinder هل يمكنك مشاركة كيفية معالجة المحتوى الذي تم قياسه في الوقت المناسب؟ شكرا مقدما

carlosagsmendes لست متأكدًا مما إذا كان هذا سيساعد ولكن إليك ما أفعله عند استخدام هذا لعرض محفوظات الدردشة:

1.) في المُنشئ ، أنشئ مرجعًا للقائمة وللمكون ChatHistory :

  constructor(props) {
    super(props);
    this.listRef = createRef();
    this.chatHistoryRef = createRef();
    this.listHeight = 0;
  }

ثم قمت بتمرير المراجع إلى ChatHistory وهو المسؤول عن عرض القائمة

2.) في componentDidMount للمكون الأصلي ، أستخدم المرجع ChatHistory للحصول على ارتفاع العنصر:

componentDidMount() {
    this.listHeight = this.chatHistoryRef.current.offsetHeight;
}

3.) في المكون الأصلي ، أحافظ على مصفوفة في حالتها مع تفاصيل الكاهن. عند إضافة عنصر جديد إلى تلك المصفوفة ، أفعل ذلك على النحو التالي:

  // find out how many pixels in height the text is going to use
  const size = getSize({
    text: displayText,
    className: styles.message,
  });

  let { height } = size;
  height += 20; // adds some spacing in pixels between messages
...rest of items needed for the chat history item..add them all to an array and update state

يعتمد getSize على https://github.com/schickling/calculate-size لكني قمت بتعديله لدعم قبول اسم فئة. هذه الفئة هي نفسها المستخدمة كحاوية لعرض الرسائل الفردية

أنا متأكد من أن هناك طريقة أفضل لتحقيق ذلك ولكنها تبدو سريعة جدًا ولم أواجه أي مشكلة بعد

osdlge : هل هناك أي فرصة أن يكون لديك عرض توضيحي لهذا في أي مكان يمكنني التحقق منه - مثل Code Sandbox (أو ما شابه)؟

bvaughn أكيد ، لقد استخرجت الأجزاء ذات الصلة من الكود الخاص بي إلى https://codesandbox.io/s/5z282z7q1l

شكرا لك للمشاركة! 😄

لقد دفعت بعض العمل قيد التقدم إلى نهج أولي للمحتوى الذي تم قياسه بشكل كسول إلى فرع يسمى المشكلة / 6

لقد نشرت أيضًا عرضًا توضيحيًا:
https://react-window-next.now.sh/#/examples/list/dynamic -size

رائع جدا.

ما زلت أحاول فهم المشكلات العامة المتعلقة بالتمرير اللانهائي أثناء البحث في مصدر الفرع / الإصدار 6 وهذه المناقشة. لذلك قد لا يكون السؤال التالي منطقيًا ، ولكن هنا يذهب لأنني أرغب حقًا في فهم هذا بشكل أكبر:

هل الإشارة أعلاه إلى "Scroll Anchor" تتعلق بالتمرير Anchoring كتقنية كما هو الحال في المقالة المرتبطة أو مواصفات CSS Scroll Anchoring ؟

شكرا مقدما

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

لقد قمت أيضًا بنشر نسخة تجريبية من نافذة رد الفعل على NPM كـ "التالي" (على سبيل المثال ، yarn add react-window@next ).

يمكنك التلاعب بها عن طريق إنشاء Code Sandbox:
https://codesandbox.io/s/5x8vlm0o7n

لقد اختبرت ذلك للتو. حاولت 10000 فقرة وحاولت القفز حتى النهاية. كان متشنج.
إذا فهمت بشكل صحيح ، كان يجب أن يقيس الصفوف المقدرة فقط في النهاية ، وبالتالي كان يجب أن يقفز على الفور حتى النهاية. هل هذا صحيح؟

في 12 أكتوبر 2018 ، في تمام الساعة 12:53 ، كتب Brian Vaughn [email protected] :

لقد قمت أيضًا بنشر إصدار ما قبل الإصدار من نافذة رد الفعل على NPM كـ "التالي" (على سبيل المثال ، إضافة الغزل ، نافذة رد الفعل @ التالي).

يمكنك التلاعب بها عن طريق إنشاء Code Sandbox:
https://codesandbox.io/s/5x8vlm0o7n https://codesandbox.io/s/5x8vlm0o7n
-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو قم بعرضها على GitHub https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555 ، أو تجاهل الموضوع https://github.com/notifications/unsubscribe-auth/ AOf2h7RmSEyGmyrEdMY6GgyZFjCKlDDFks5ukGafgaJpZM4UTb3P .

لا ، الفرع الأولي الذي دفعته لا يطبق الخوارزمية
الموصوفة في هذه القضية. يتطلب نهجًا أكثر سذاجة
قياس المحتوى السابق قبل عرض المحتوى لاحقًا.

اسف لخلط الامور!

في الجمعة ، 12 أكتوبر 2018 ، 6:34 مساءً كتب akraines [email protected] :

لقد اختبرت ذلك للتو. حاولت 10000 فقرة وحاولت القفز إلى
نهاية. كان متشنج.
إذا فهمت بشكل صحيح ، كان يجب أن تقيس الصفوف المقدرة فقط
ليكون في النهاية ولذلك كان يجب أن يقفز على الفور إلى
نهاية. هل هذا صحيح؟

في 12 أكتوبر 2018 ، في تمام الساعة 12:53 ، كتب Brian Vaughn [email protected] :

لقد قمت أيضًا بنشر نسخة تجريبية من نافذة رد الفعل على NPM كـ
"التالي" (على سبيل المثال ، إضافة الغزل ، نافذة رد الفعل @ التالي).

يمكنك التلاعب بها عن طريق إنشاء Code Sandbox:
https://codesandbox.io/s/5x8vlm0o7n < https://codesandbox.io/s/5x8vlm0o7n

-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذا البريد الإلكتروني مباشرة ، قم بعرضه على GitHub <
https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555> ،
أو كتم صوت الموضوع <
https://github.com/notifications/unsubscribe-auth/AOf2h7RmSEyGmyrEdMY6GgyZFjCKlDDFks5ukGafgaJpZM4UTb3P
.

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/bvaughn/react-window/issues/6#issuecomment-429282228 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AABznR5R1N0ErukleIfvaLQORF_NECgRks5ukHBHgaJpZM4UTb3P
.

مهلا،
أردت أن أسأل ما إذا كان هناك تقدير للإفراج الرسمي؟

يستخدم فريقي react-virtualized لمشروع جديد بدأناه ولكننا نحتاج إلى وظيفة التمرير لأعلى والقفز إلى فهرس صف معين (كما يمكنك أن تفترض أن صفوفنا تحتوي على محتوى ديناميكي ، يحتوي على صور ومحتويات أخرى متغيرة).

هل تنصح بالترحيل إلى react-window في إصدار ألفا؟ أم يجب أن ننتظر إصدارًا رسميًا؟

وأيضًا إذا كان هناك أي طريقة يمكنني من خلالها المساهمة في إنهاء هذه الميزة ، فأنا أرغب في المساعدة 😄

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

إذا كنت ترغب في المساهمة ، فستكون إحدى الطرق هي اختبار إصدار ألفا وإخباري بمدى نجاحه ، وإذا وجدت أي أخطاء.

من المحتمل أن أركز أكثر على هذا قريبًا ، لكن لا يمكنني تحديد متى. على وجه الخصوص للأسبوع أو الأسبوعين المقبلين ، سأشتت انتباهي عن طريق React conf وأصبحت إصدار 16.6 جاهزًا.

bvaughn عمل رائع 👏 أخيرًا لديك بعض الوقت للعب. 🕹

يبدو أننا بحاجة إلى بعض التعديلات عند إخفاء القائمة باستخدام display: none على سبيل المثال لديك صفحة بها علامتا تبويب وتريد التبديل بينهما دون فقد حالتك الحالية (موضع التمرير وما إلى ذلك) ، إنها ليست حالة استخدام نادرة .

تقدم Simple Code Sandbox المشكلة:
https://codesandbox.io/s/p7vq18wmjq

يحدث ذلك لأنه عندما نقوم بتشغيل عرض لا شيء ، سيكون لدى جميع الأطفال offsetHeight === 0
تغيير الحجم يلاحظ kiks في القيم الجديدة المحدثة. لا يجب أن يهتم react-window بهذه المواقف إذا قرر المتصل إخفاءها ، يجب على الأساسي التعامل معها عن طريق حظر handleNewMeasurements

إذا كان هذا الخط
https://github.com/bvaughn/react-window/blob/issues/6/src/DynamicSizeList.js#L443
سيتغير إلى

handleNewMeasurements: instance._handleNewMeasurements

ثم يمكننا تجاوز المنطق الافتراضي

let _handleNewMeasurements

<DynamicSizeList  
  ref={current => {
    if (current) {
      _handleNewMeasurements = current._handleNewMeasurements
      current._handleNewMeasurements = (...args) => {
        if (!isHidden) {
          return _handleNewMeasurements(...args)
        }
      }
    }
  }}
  {...otherProps}

لقد قمت بدفع تحديث لهذا الفرع (ونشرت علامة @next إلى NPM) تعمل على إصلاح خطأ التمرير السلس في Firefox باستخدام margin-top لحساب العناصر التي تم تغيير حجمها أثناء التمرير قيد التقدم. الأمر أكثر تعقيدًا مما أريد ولكني لا أعرف طريقة أفضل للتعامل مع هذا في الوقت الحالي. (أحتاج أيضًا إلى إجراء بعض الاختبارات الإضافية لهذا النهج ، لأنني أعتقد أنه قد لا تزال هناك بعض الجوانب الخشنة في الحالات القصوى).

أقدر التعليقات الواردة أعلاه ،piecyk. لم يتح لي الوقت للبحث فيه حتى الآن. (لا يزال هذا مجرد مشروع جانبي بالنسبة لي في الوقت الحالي).

يبدو أنني قد أتمكن من إزالة اختراق الهامش لصالح scrollBy لمتصفح Firefox على الأقل . تحتاج إلى اختبار IE و Edge أولاً. قد يكون لديهم تحدياتهم الخاصة.

نعم @ bvaughn أنا أعلم ، عمل رائع 👏 لا أعرف كيف تجد الوقت! مجد لك!

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

نعم. أنا أفهم جوهر المشكلة التي تصفها. أنا لا أحب فكرة القرصنة حولها من خلال تجاوز / تصحيح القرود لمزيد من أساليب المثيل ، لذلك أود أن أعطيها مزيدًا من التفكير أولاً.

ويبدو أن ما تم كسر الحزمةnext؟

https://codesandbox.io/s/5x8vlm0o7n

لا أعرف ما إذا كان هذا هو المكان المناسب لترك سؤال ، لذا اعذرني إذا كنت مخطئًا. إذن باختصار:

• لقد استخدمت DynamicSizeList جنبًا إلى جنب مع AutoResizer وعمومًا ، فهو يعمل بشكل جيد. مجد!
• لقد طُلب مني تقديم صفوف يمكن توسيع محتواها (إضافة div إضافي بمعلومات تكميلية) والتراجع.
• لقد أضفت أيضًا (عبر الإعادة) دعامة في هذه الصفوف تستمع إلى إجراءات التوسيع / ​​التراجع العالمية.
• تبدأ الأشياء الممتعة. أنقر فوق توسيع / ​​تراجع ويبدو كل شيء على ما يرام!
• إذا قمت بالتمرير قليلاً ثم قمت بتوسيع / ​​سحب جميع الصفوف ، فإن عدد الصفوف التي تم سحبها هو نفسه عدد الصفوف الموسعة. إذا قمت بتوسيع التراجع مرة أخرى ، فسيذهب العدد إلى النصف وهكذا.
  (على سبيل المثال ، تم سحب 30 صفًا -> 10 موسعًا -> انقر فوق سحب -> تم سحب 10 صفوف -> انقر فوق توسيع -> تم توسيع 3 صفوف -> انقر فوق سحب -> تم سحب 3 صفوف).

حاولت إعادة تحميل itemData عن طريق توفير كائن مختلف ولكنه نفس الشيء باستخدام JSON.parse (JSON.stringify (data)) hack. لا حظ :-(

أظن خطأ في تقدير الارتفاع. أي فكرة للتغلب على هذه المشكلة؟

هل يمكنك مشاركة مثال على رموز وعلبة؟ أحتاج أن أفعل شيئًا مشابهًا لذلك ربما يمكننا مساعدة بعضنا البعض

vtripolitakis لقد وجدت للتو مثالاً بصفوف قابلة للتوسيع . هنا رابط المناقشة

شكرًا carlosagsmendes على هذا ، لكن دراسة الحالة الخاصة بي مختلفة قليلاً حيث أستخدم DynamicSizeList :-(

لذلك وجدت سبب المشكلة:
يأخذ state.scrollOffset قيمًا سالبة.

في src/DynamicSizeList.js نحتاج إلى إضافة الكود التالي في السطر 299

if (sizeDeltaForStateUpdate < 0) {
          sizeDeltaForStateUpdate = 0;
        }

حسنًا ... لا أتوقع أن يكون الإصلاح صحيحًا ، في لمحة. قد تكون دلتا الحجم سلبية بشكل شرعي ، أليس كذلك؟

ربما يجب أن يكون لدينا حارس ( Math.max(0, prevState.scrollOffset + sizeDeltaForStateUpdate) ) حول مكان تحديث قيمة state.scrollOffset ؟

مرحبًا ، أثناء تصحيح أخطاء حالتي ، أخذ sizeDeltaTotal قيمًا سالبة وبالتالي جعلت sizeDeltaForStateUpdate سلبيًا ، مما أدى إلى ظهور state.scrollOffset سلبيًا بعد تحديث الحالة.

حدث هذا عندما قمت بتوسيع العناصر وسحبها ثم التمرير إلى الأعلى باستخدام scrollOffset 0 والاتجاه backwards . ثم إذا توسعت وتراجعت عدة مرات ، فسأحصل على السلبيات.
نعم ، يجب أن يكون اقتراحك جيدًا بنفس القدر. ~ اختباره الآن. ~ يعمل بشكل صحيح.

marcneander جرب الإصدار 1.4.0-alpha.1

فيما يتعلق بتجاهل أحداث تغيير الحجم عندما تكون القائمة مخفية ، ربما شيء مثل هذا https://github.com/piecyk/react-window/commit/acfd88822156611cfd38872acdafbbefd2d0f78f
@ bvaughn ما رأيك؟

أحاول إضافة التمرير التلقائي في تطبيق على غرار مربع الدردشة وأواجه هذه المشكلة: DynamicSizeList does not support scrolling to items that have not yet measured. scrollToItem() was called with index 111 but the last measured item was 110.

أحاول الاتصال بـ scrollToItem(items.length-1) componentDidUpdate

هل هذا السلوك مقصود؟

نعم ، ربما شيء من هذا القبيل يمكن أن يعمل بيسيك 👍

هل هذا السلوك مقصود؟

لا يبدو الأمر كذلك xaviergmail ، لا. ربما خطأ.

ياbvaughn أنا لا أقصد أن إفشال هذه المسألة، ولكن أردت أن تتناغم في القول بأن هناك أنيق تنفيذ مجموعة قليلة من الداخلية فليكس 4 DataGrid الذي قد تكون قادرة على مساعدة هنا. أعرف أن Flash هو: -1: ، ولكن الإصدار الأخير من Flex كان يحتوي في الواقع على محرك تخطيط افتراضي رائع جدًا ... لأن Flash :-)

LinearLayoutVector عبارة عن مصفوفة متفرقة للتخطيط بين مؤشرات العناصر ومواضع البكسل في بُعد واحد. العمليات الأساسية الثلاث هي:

interface LinearLayoutVector {
   start: (index) => position;
     end: (index) => position;
  indexOf: (position) => index;
}

داخليًا ، يخصص دلاء بصلاحيات 2 لتخزين مواضع العناصر (يمكن ضبط الطاقة المحددة لتلائم أحجام العناصر الأكبر أو الأصغر بشكل أفضل). يتيح ذلك عمليات البحث عن O (1) index -> position في الوقت الثابت ، ومسحًا فعالاً للكتل الخطية لعمليات البحث عن position -> index . وهو يدعم الحشو والفجوات والأحجام الافتراضية وإدخال الوصول العشوائي والإزالة والتحديثات.

لقد نقلته إلى JS منذ حوالي 6 سنوات عندما كنت أقوم بالكثير من واجهات المستخدم الافتراضية للجوال. يمكن أن يستخدم تحديثًا لـ ES6 لسهولة القراءة ، ويمكنه على الأرجح الضغط على مزيد من السرعة عن طريق التبديل إلى المصفوفات المكتوبة ، لكن المنطق الأساسي هو الصوت.

لقد قدمت مسودة العلاقات العامة للتفاعل الافتراضي منذ بضعة أسابيع والتي بدلت العناصر الداخلية لـ CellSizeAndPositionManager باستخدام LLV وتم حل بعض أشياء إبطال الأداء / ذاكرة التخزين المؤقت. إذا كنت محبطًا ، فسيسعدني تقديم عرض عام مماثل لـ react-window في الأسابيع القليلة القادمة.

مرحبا trxcllnt 👋

إذا كنت مهتمًا بمشاركة العلاقات العامة ، فسيسعدني إلقاء نظرة. قد ترغب في جعله مقابل الفرع issues/6 (WIP PR # 102).

في لمحة ، لا يبدو أن linear-layout-vector خضع لأي اختبارات أو أنه يتم استخدامه بكثافة ، لذلك سيكون لدي القليل من التردد الأولي ولكني ما زلت على استعداد لإلقاء نظرة. أود أيضًا أن ألقي نظرة على مقدار الوزن الذي تضيفه إلى الحزمة بعد تصغيرها + تصغيرها ، لكنني لا أتوقع أن تضيف الكثير. 😄

bvaughn لا عرق ، وأنا أفهم تماما. لقد كان شيئًا فعلته منذ سنوات على xmas IIRC. سأقوم بتنظيفه والتأكد من هبوطه بمجموعة اختبار كاملة. لا تقلق بشأن تكبد تبعية إضافية أيضًا. إنه فصل صغير ، ويسعدني أن أساهم به بشكل مباشر.

بعد أن علقت ، تذكرت أنني حصلت على العرض التوضيحي الذي قمت بعمل المنفذ من أجله: https://github.com/trxcllnt/virt-list. اضغط على موقع صفحات GH هذا وقم برمي قائمة الأفلام إلى اليسار واليمين (كان هذا مرتبطًا ببعض المناقشات حول أداء العرض الذي كنا نجريه في فريق iOS في Netflix).

bvaughn شكرًا لك على كل العمل الذي تم في القضايا / 6 فرع خلال العام الماضي!
أقوم حاليًا باختبار ^1.6.0-alpha.1 وأخطط للشحن إلى الإنتاج باستخدام هذا الإصدار.

اعتقدت أنني سأقوم بنشر ما أحتاج إلى القيام به من أجل العمل مع DynamicSizeList لأي شخص آخر يبحث في هذه المشكلة ويستخدم الأحدث في الفرع.

اتباع المستندات المرتبطة أعلاه وتلك التي تم إنشاؤها من فرع القضايا / 6 سيؤدي إلى

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

ولذا كان الإصلاح هو تقليد ما تفعله في الاختبارات و ...

import { DynamicSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

// in constructor(props) for handling scrolling
this.listRef = React.createRef();

// in render()
const allItems = [...];
const Renderer = ({ forwardedRef, style, index, ...rest }) => (
  <div ref={forwardedRef} style={style}>
    <MyCoolComponent index={index} otherProps={otherPropsBasedOnAllItems} />
  </div>
);

const RefForwarder = React.forwardRef((props, ref) => (
  <Renderer forwardedRef={ref} {...props} />
));

return <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
  <div style={{ flexGrow: 0, flexShrink: 0, width: '100%', position: 'sticky', top: 0, zIndex: zIndexHideLayers }}>
    <MyCoolComponentThatControlsScrolling listRef={this.listRef} />
  </div>
  <div style={{ flex: 1, width: '100%' }}>
    <AutoSizer>
      {({ height, width }) => (
        <List ref={this.listRef} itemCount={allItems.length} width={width} height={height}>
          {RefForwarder}
        </List>
      )}
    </AutoSizer>
  </div>
</div>;

ربما يتضمن المثال الخاص بي أكثر مما تريده في صفحة المستندات هذه ، ولكن آمل أن يجعل تحديث المستند أسهل بالنسبة لك

ملاحظات على الإصدار الحالي للفرع؟
💯 يعمل بشكل جيد
🎉 شكرا مرة أخرى على كل العمل!

تحرير: DynamicSizeList يجعل هذه المكتبة سهلة الاستخدام الآن.

شكرا على المشاركة بالتفاصيل! عندما أحصل على بعض النطاق الترددي لاختيار هذه المشكلة احتياطيًا ، سأبحث فيها.

أعتقد أن هذا النهج قد يكون قابلاً للاستخدام جنبًا إلى جنب مع الاقتراح الأصلي في هذه المسألة.

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

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

ربما يمكن أن تعمل؟

bvaughn هل xaviergmail ، مع التمرير في البداية إلى "الجزء السفلي" مثل الدردشة؟ لقد أنشأت رمزًا وصندوقًا لمثال لا يعمل. إذا لم يكن كذلك ، فهل هناك أي حلول؟

https://codesandbox.io/s/vr648ywy3

دعنا نبقي التعليقات حول هذه المشكلة مركزة على مناقشة API ، وليس استكشاف الأخطاء وإصلاحها.

أقترح Stack Overflow لطرح الأسئلة.

هل من الممكن الكشف عن إعادة تعيين AfterIndex في واجهة برمجة التطبيقات هذه؟ أقوم بإضافة وتعديل وإزالة من قائمة DynamicSizeList الخاصة بي ، وعلى الأقل مما يمكنني جمعه ، ستكون هذه هي الطريقة للاتصال لإصلاح الارتفاعات ، أليس كذلك؟

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

تنفيذ poc https://github.com/piecyk/react-window/pull/2/files
هنا هو رمز وضع الحماية الذي يدير بناء الفرع
https://codesandbox.io/s/4x1q1n6nn9

uh-oh Firefox لا يمكنه مواكبة العرض عند التمرير السريع مثل Chrome باستخدام هذا الأسلوب 🤷‍♂️

أحاول إضافة التمرير التلقائي في تطبيق على غرار مربع الدردشة وأواجه هذه المشكلة: DynamicSizeList does not support scrolling to items that have not yet measured. scrollToItem() was called with index 111 but the last measured item was 110.

أحاول الاتصال بـ scrollToItem(items.length-1) componentDidUpdate

هل هذا السلوك مقصود؟

تأخرت Kinda ولكني أحاول حل هذه المشكلة باستخدام خطاف التفاعل هذا .

ليس الحل الأفضل لكني ما زلت أعمل عليه. ربما يمكننا العمل لجعله أكثر عمومية (وبساطة) وإنشاء حزمة؟

Gif لإظهار كيفية عمل ذلك الآن:
https://cl.ly/87ca5ac94deb

ربما يمكننا فتح مشكلة جديدة للحديث عن حل لهذا السلوك الشبيه بالمحادثة؟

لا يستطيع Firefox مواكبة العرض عند التمرير السريع مثل Chrome باستخدام هذا النهج

يبدو أنه يعمل في الإصدار 68 من Firefox Nightly.

bvaughn أنا أستخدم DynamicSizeList مع مكونات InfiniteLoader و Autosizer لمحاولة إنشاء موجز

من حيث API والسلوك:

1. هل يمكننا الحصول على كائن البيانات كوسيطة ثانية في رد نداء itemKey ، كما هو الحال في FixedSizeList؟

2. هل يمكننا إعادة ضبط ارتفاع الحاوية الداخلية عند تصفية كائن البيانات / تعديله.

لقد كنت أستخدم DynamicSizeList من 1.6.0-alpha.1 مع InfiniteLoader لفترة من الوقت الآن وهو يعمل بشكل رائع. شكرا على الميزة الرائعة!

ومع ذلك ، لدي الآن متطلبات لاستخدام scrollToItem() . على غرار التعليق أعلاه ، ولكنه مميز لأنه لم يتم قياس أي شيء على الإطلاق حتى الآن ، فأنا أحصل على:

DynamicSizeList does not support scrolling to items that yave not yet measured. scrollToItem() was called with index 9 but the last measured item was -1.

لا يبدو أنه مرتبط بالتوقيت لأنني حاولت الاتصال به بعد فترة طويلة من setTimeout . لذا ، هل يمكنني فرض قياس؟ أو هل هناك أي حلول؟

EDIT : Nevermind ، initialScrollOffset فعل ما أحتاجه.

لماذا استخدام findDOMNode؟

هل توجد تعريفات الأنواع للفرع @next ؟

WillSquire لا ، لم يفعلوا ذلك. لست متأكدًا أيضًا مما إذا كان من الممكن إصدارها بسعر @next tag في DefinitelyTyped (قد أكون مخطئًا). أيضًا ، أعتقد أنه سيكون من الأفضل الانتظار حتى يتم دمج هذا الفرع أخيرًا وإصدار إصدار جديد حيث لا يزال من الممكن تغيير واجهة برمجة التطبيقات.

bvaughn لقد كنت على استعداد لاستخدام هذا في devhub ، ولكن قبل أن أستثمر في دمجه ، هل تعتقد أنه في حالة جيدة بالفعل أم أنه لا يزال

brunolemos قائمة

أبقني على اطلاع بالمستجدات!

~ حاولت استخدامه لكن لم تنجح حتى الآن. ~

حصلت على العمل ولكن الأداء ليس جيدًا. ربما يكون العنصر الخاص بي باهظ الثمن أو شيء آخر.

https://github.com/devhubapp/devhub/pull/152

يبدو أن شيئًا ما قد يكون كسر في أحدث إصدار عند استخدام AutoSizer بارتفاع حاوية 100٪

تحرير: تمكنت من العثور على حل بديل باستخدام 100vh و calc ()

شيء ما قد يكون كسر

غامضة للغاية بحيث لا يمكن اتخاذ إجراء بشأنها. مشاركة نسخة مع السلوك المتوقع؟

أنا أستخدم DynamicSizeList من 1.6.0-alpha.1 مع عوامل تصفية مختلفة وبعض طريقة عرض البطاقة المعقدة. لكننا نحتاج إلى الالتفاف بالارتفاع والعرض. أنه يسير على ما يرام بالنسبة لي.

شكرا يا رفاق

مرحبًا ، أحاول تجربة DynamicSizeList ، ولكن يتم عرض جميع عناصري فوق بعضها البعض. لقد قمت بتمرير سمة النمط إلى العنصر المعروض ، ولكن إذا قمت بتسجيل style ، أرى أن height غير معرّف لكل عنصر ، top و left تكون دائمًا 0 .
ماذا افتقد هنا :-)؟

@ graphee-gabriel فاتك مثال على الإنجاب.

لم يتم تحديد الارتفاع عمدًا في البداية ، حتى يتم عرض العناصر بحجمها الطبيعي ...

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

import React from 'react'
import { DynamicSizeList as List } from 'react-window'

import Layout from '../Layout'
import Text from '../Text'
import withScreenDimensions from '../withScreenDimensions'

class ListView extends React.Component {
  state = {
    availableHeight: 0
  }

  componentDidMount() {
    const checkForHeightChange = () => {
      if (this.containerDiv) {
        const { offsetHeight } = this.containerDiv
        if (this.offsetHeight !== offsetHeight) {
          this.offsetHeight = offsetHeight
          this.setState({ availableHeight: offsetHeight })
        }
      }
    }
    checkForHeightChange()
    this.intervalId = setInterval(checkForHeightChange, 10)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    const {
      data,
      renderItem,
      emptyText,
      dimensions,
    } = this.props
    const { width } = dimensions
    const { availableHeight } = this.state
    return (
      <Layout
        centerVertical
        style={{
          height: '100%',
        }}>
        {data && data.length > 0 ? (
          <div
            style={{
              display: 'flex',
              flex: 1,
              height: '100%',
              backgroundColor: 'red',
              alignItems: 'stretch',
              justifyContent: 'stretch',
            }}
            ref={ref => this.containerDiv = ref}
          >
            <List
              height={availableHeight}
              itemCount={data.length}
              width={width > 800 ? 800 : width}
            >
              {({ index, style }) => {
                console.log('style', style)
                return (
                  <div style={style}>
                    {renderItem({
                      item: data[index], index
                    })}
                  </div>
                )
              }}
            </List>
          </div>
        ) : (
            <Text bold center padding accent>{emptyText}</Text>
          )}
      </Layout>
    )
  }
}


export default withScreenDimensions(ListView)

مشاركة Code Sandbox حيث يمكنني رؤية هذا؟

أود أن أقترح _not_ استخدام دالة مضمنة لعارض العنصر الخاص بك لأنها تسبب عمليات إعادة تحميل غير ضرورية بسبب حقيقة أنها تتغير في كل مرة يتم فيها تقديم الأصل. (هذا هو السبب في أن جميع الأمثلة تتجنب الوظائف المضمنة.)

@ graphee-gabriel لقد حصلت على هذا أيضًا ، لا تذكره المستندات ولكنك تحتاج إلى جعل دعم مكون الصف الخاص بك يتلقى المرجع:

Row = React.forwardRef(
      (row, ref) => (
        <div ref={ref} style={row.style}>
          {renderItem({
            item: data[row.index],
            index: row.index,
          })}
        </div>
      ),
    )

مرحبًا ، ها أنت ذا:

https://codesandbox.io/s/sweet-sea-irxl8؟fontsize=14

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

Annnnnd كان يجب أن أتحقق من رسالة بصندوق الحماية هذا.
كانت هذه هي الخطوة المفقودة ، وتم إصلاح مشكلتي ، شكرًا لك!

لقد أثارت مشكلة أخرى ، لقد قمت بتحديث صندوق الرمل حتى تتمكن من إعادة إنتاج @ bvaughn
يمكنك العثور عليها هنا: https://codesandbox.io/s/sweet-sea-irxl8

تعمل القائمة الآن بشكل جيد ، ولكن يبدو أنها تنمو بشكل غريب مع المحتوى ، ولا تتقلص أبدًا مرة أخرى.

المعنى:

1. إذا قمت بعرض 6 عناصر ، قم بالتمرير حتى النهاية ، كل شيء على ما يرام.
2. قم بتغيير المحتوى لإظهار 20 عنصرًا ، ثم قم بالتمرير حتى النهاية ، كل شيء جيد.
3. قم بتغيير المحتوى مرة أخرى إلى 6 عناصر ، وقم بالتمرير حتى العنصر الأخير ، ولكن يمكنني الاستمرار في التمرير على مساحة بيضاء يبدو أنها تركت من المحتوى السابق (مجموعة بيانات 20 عنصرًا).

لقد أثارت مشكلة أخرى ، لقد قمت بتحديث صندوق الرمل حتى تتمكن من إعادة إنتاج @ bvaughn
يمكنك العثور عليها هنا: https://codesandbox.io/s/sweet-sea-irxl8

تعمل القائمة الآن بشكل جيد ، ولكن يبدو أنها تنمو بشكل غريب مع المحتوى ، ولا تتقلص أبدًا مرة أخرى.

المعنى:

1. إذا قمت بعرض 6 عناصر ، قم بالتمرير حتى النهاية ، كل شيء على ما يرام.
2. قم بتغيير المحتوى لإظهار 20 عنصرًا ، ثم قم بالتمرير حتى النهاية ، كل شيء جيد.
3. قم بتغيير المحتوى مرة أخرى إلى 6 عناصر ، وقم بالتمرير حتى العنصر الأخير ، ولكن يمكنني الاستمرار في التمرير على مساحة بيضاء يبدو أنها تركت من المحتوى السابق (مجموعة بيانات 20 عنصرًا).

أواجه نفس المشكلة

هذا هو بالضبط ما احتاجه.
لقد اختبرت للتو DynamicSizeList من 1.6.0-alpha.1 بالاشتراك مع رد فعل-افتراضي-حجم تلقائي ومحمل رد فعل-نافذة-لانهائي مع نتائج جيدة جدًا.
هل من شيء يمكنني المساعدة به للمضي قدمًا؟

مرحبًا bvaughn ، هل كان لديك وقت للتحقق من الكود وصندوق من https://github.com/bvaughn/react-window/issues/6#issuecomment -509213284؟

مرحبًا ، أنا أستخدم DynamicSizeList لتطبيق الدردشة الخاص بي.
شكرا على الميزة الرائعة.

ومع ذلك ، لدي مشاكل مع الأداء الضعيف والكثير من معالجة البرنامج النصي.
عند التمرير ، ترتفع وحدة المعالجة المركزية دائمًا وغالبًا ما تصل إلى 100٪.
هل لديك أي أفكار للحلول؟

import { useChatList } from '../../../hooks/chat/useChatList';
import LoadingSpinner from '../../../utils/LoadingSpinner';

import dynamic from 'next/dynamic';
import * as React from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
// @ts-ignore
import { DynamicSizeList as List } from 'react-window';
import { Message } from 'src/app/typings';

const { useRef, useCallback } = React;

const RowItem = React.memo(
  ({ forwardedRef, style, index, data }: any) => {
    const item = data[index] as Message;
    if (item) {
      return (
        <div id={item.messageId} ref={forwardedRef} style={style}>
          {item.text && item.text.plainText}
        </div>
      );
    }
    return null;
  },
  (prevProps, newProps) => {
    const { index, data } = prevProps;
    const { index: newIndex, data: newData } = newProps;
    let isMemo = true;
    isMemo = isMemo && index === newIndex;
    isMemo = isMemo && data.length === newData.length;
    return isMemo;
  }
);

function ChatList() {
  const listRef = useRef<HTMLInputElement>();

  const { formatMessages: messages, isLoadingMessages } = useChatList();

  const keyCreator = useCallback((index: number) => `ChatList/RowItem/${messages[index].messageId}`, [messages]);

  if (isLoadingMessages && (!messages || messages.length <= 0)) {
    return <LoadingSpinner />;
  }
  return (
    <div style={{ flex: 1, height: '100%', width: '100%' }}>
      <AutoSizer>
        {({ height, width }) => (
          <List
            ref={(lref: HTMLInputElement) => {
              if (lref !== null) {
                listRef.current = lref;
              }
            }}
            itemCount={messages.length}
            itemData={messages}
            itemKey={keyCreator}
            height={height}
            width={width}
            overscanCount={10}
          >
            {React.forwardRef((props, ref) => (
              <RowItem forwardedRef={ref} {...props} />
            ))}
          </List>
        )}
      </AutoSizer>
    </div>
  );
}

export default ChatList;

مرحبا @ bvaughn ، عمل جيد!
ما هي الطريقة الصحيحة لإعادة حساب ارتفاعات العناصر عند تغيير حجم مكان العمل؟ بمساعدة التعليقات أعلاه ، أقوم ببعض العروض التوضيحية https://codesandbox.io/s/angry-hill-tcy2m
عندما يتغير عرض مكان العمل عن طريق الماوس ، أحتاج إلى إعادة حساب ارتفاع العنصر بالكامل (وقد يتم مسح ذاكرة التخزين المؤقت للارتفاع الداخلي لمكون VariableSizeList) ...

هل هناك أي حل الآن لقائمة ديناميكية قضيت 4 ساعات في محاولة تشغيلها ، هاه
بعد قراءة جميع التعليقات انتهيت 😠
إذا كان لديكم أي حل عملي ، يرجى تزويدنا بذلك

لا يوجد "يا رفاق" في هذا المشروع. يتم صيانتها من قبل شخص واحد.

ومن اللامبالاة نوعًا ما ترك تعليقات على قضايا متعددة في نفس اليوم تشكو من نفس الشيء. بكل الوسائل ، من فضلك استخدم رد الفعل الافتراضي.

أنا آسف حقًا لترك تعليق مثل هذا بريان. لقد وجدت هذه المشكلة لاحقًا ثم قرأت جميع التعليقات واعتقدت أن الآخرين يساعدونك على الأقل

ShivamJoker لقد

bvaughn هل سيكون لديك وقت للتحقق من المثال في sandbox من https://github.com/bvaughn/react-window/issues/6#issuecomment -509213284؟

=> https://codesandbox.io/s/sweet-sea-irxl8

يبدأ بالقائمة الأقصر ، لذلك:

• قم بالتمرير لأسفل حتى نهاية القائمة
• مرر للخلف وانقر على Show Long List
• انتقل لأسفل حتى النهاية
• مرر للخلف وانقر على Show Short List
• أخيرًا ، قم بالتمرير لأسفل للمرة الأخيرة لترى أن القائمة المختصرة يتبعها الآن الكثير من المساحات الفارغة.

شكرا لك!

ShivamJoker لقد

bvaughn هل سيكون لديك وقت للتحقق من المثال في sandbox من رقم 6 (تعليق) ؟

=> https://codesandbox.io/s/sweet-sea-irxl8

يبدأ بالقائمة الأقصر ، لذلك:

• قم بالتمرير لأسفل حتى نهاية القائمة
• مرر للخلف وانقر على Show Long List
• انتقل لأسفل حتى النهاية
• مرر للخلف وانقر على Show Short List
• أخيرًا ، قم بالتمرير لأسفل للمرة الأخيرة لترى أن القائمة المختصرة يتبعها الآن الكثير من المساحات الفارغة.

شكرا لك!

نعم ، يجب إعادة تعيين الحاوية الداخلية إلى ارتفاعها عند تصفية / تغيير البيانات.

ShivamJoker لقد

bvaughn هل سيكون لديك وقت للتحقق من المثال في sandbox من رقم 6 (تعليق) ؟

=> https://codesandbox.io/s/sweet-sea-irxl8

يبدأ بالقائمة الأقصر ، لذلك:

• قم بالتمرير لأسفل حتى نهاية القائمة
• مرر للخلف وانقر على Show Long List
• انتقل لأسفل حتى النهاية
• مرر للخلف وانقر على Show Short List
• أخيرًا ، قم بالتمرير لأسفل للمرة الأخيرة لترى أن القائمة المختصرة يتبعها الآن الكثير من المساحات الفارغة.

شكرا لك!

شكرًا ، لقد نفذت نفس الشيء على أمل أن يعمل بشكل جيد للمستخدمين الآخرين أيضًا
ونعم رأيت أيضًا أن مشكلة الارتفاع مع التمرير

@ graphee-gabriel ولكن لدي أيضًا مشكلة أخرى يستخدمها شريط التطبيقات لإخفائها عند التمرير لأسفل وهو ما لا يحدث الآن ، فما الحل؟

يوم جيد. لقد استخدمت DinamycSizeList في مشروعي التجريبي. كان كل شيء على ما يرام ، لكن بعد فترة لاحظت أن مكون القائمة بدأ يعمل بشكل غير صحيح. في البداية اعتقدت أنها مكتبة تعتمد عليها نافذة التفاعل. لكن بالنظر إلى العرض التوضيحي الخاص بك
https://react-window-next.now.sh/#/examples/list/dynamic -size
لاحظت نفس النتيجة ، على الرغم من أنها كانت تعمل بشكل مثالي في الماضي. هل يمكنك اقتراح سبب هذه الأخطاء؟

تضمين التغريدة

نعم ، يجب إعادة تعيين الحاوية الداخلية إلى ارتفاعها عند تصفية / تغيير البيانات.

كيف أفعل ذلك لقد حاولت أن أضع ارتفاعًا للدولة ولكن لا يبدو أنها تعمل
اي حل ؟

تضمين التغريدة

نعم ، يجب إعادة تعيين الحاوية الداخلية إلى ارتفاعها عند تصفية / تغيير البيانات.

كيف أفعل ذلك لقد حاولت أن أضع ارتفاعًا للدولة ولكن لا يبدو أنها تعمل
اي حل ؟

يجب أن يتم تنفيذه داخليًا من قبل المكتبة.

ShivamJoker لقد

bvaughn هل سيكون لديك وقت للتحقق من المثال في sandbox من رقم 6 (تعليق) ؟

=> https://codesandbox.io/s/sweet-sea-irxl8

يبدأ بالقائمة الأقصر ، لذلك:

• قم بالتمرير لأسفل حتى نهاية القائمة
• مرر للخلف وانقر على Show Long List
• انتقل لأسفل حتى النهاية
• مرر للخلف وانقر على Show Short List
• أخيرًا ، قم بالتمرير لأسفل للمرة الأخيرة لترى أن القائمة المختصرة يتبعها الآن الكثير من المساحات الفارغة.

شكرا لك!

يمكنك ضبط مفتاح لمنع المساحات الفارغة.
https://codesandbox.io/s/blissful-voice-mzjsc

مرحبًا @ bvaughn ، شكرًا لك على هذا المشروع الرائع!

لقد قضيت بعض الوقت في كود DynamicLists بدافع الحاجة ، في محاولة لمعرفة كيفية التمرير في أي مكان دون أي قيود وكيفية التمرير إلى أي عنصر ، سواء تم قياسه أم لا.

تمكنت من القيام بذلك هنا https://github.com/bvaughn/react-window/compare/issues/6...Sauco82 : المشكلات / 6 بالتخلص من lastMeasuredIndex والتحقق من كل عنصر بدلاً من itemIsMeasured ، والذي من الواضح أنه يتطلب تغييرات أخرى كثيرة.

لم أشارك مطلقًا في مشروع مفتوح المصدر ولم أستخدم Flow ، لذلك لست متأكدًا تمامًا مما إذا كان هذا مفيدًا أو يستحق تضمينه ، ولا إذا كان ينبغي عليّ تجربة العلاقات العامة مباشرة أو مناقشتها هنا

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

مرحبًا ، إليك حل أبسط بكثير (لا داعي لإلحاق عناصر الأشباح بـ DOM لحساب حجمها):
الرموز

مرحبًا ، إليك حل أبسط بكثير (لا داعي لإلحاق عناصر الأشباح بـ DOM لحساب حجمها):
الرموز

رائع! إنه يعمل بالنسبة لي. عمل رائع.

@ Kashkovsky يحسب الحجم إذا تم التحديث
و itemSize المكالمة مرة واحدة

@ userbq201Kashkovsky الحل عظيم! بطريقة ما في حالتي لم ينجح الأمر خارج الصندوق ، اضطررت إلى تعديل الكود ChatHistory.js مثل ذلك:

    const listRef = useRef(); // added
    const sizeMap = useRef({});
    const setSize = useCallback((index, size) => {
        sizeMap.current = {...sizeMap.current, [index]: size};
        listRef.current.resetAfterIndex(index); // added
    }, []);
    const getSize = useCallback(index => sizeMap.current[index] || 60, []);
    // ...
    <List ref={listRef}

وإلا فسيتم عرض جميع العناصر بنفس الارتفاع الافتراضي. في حالتك يعمل كما هو ، لا يمكنني شرح سبب وجود اختلاف ... ربما @ bvaughn يمكن.

bvaughn ماذا لو كان علينا تمكين سلوك مشابه لـ SSR؟ أي تلميح لهذا الجانب؟

bvaughn هل أنا أو العرض الخاص بك لا يعمل؟

تنفيذ لطيف Kashkovsky @ kirill-konshin و @ userbq201 !

كيف ستتعامل مع استخدام الحفظ مع هذا الحل؟

حاولت تغليف ChatMessage في memo بـ areEqual ، لكن لا يزال React يعيد عرض كل كائن في كل مرة يتم فيها إضافة رسالة إلى القائمة.

في القوائم الثابتة الأخرى الخاصة بي ، تعمل المذكرات بشكل جيد مع تلك المذكرة / مغلف areEqual ، ولكن ربما يكون ref={root} يؤثر عليها؟

يمكنك بسهولة معرفة ما إذا كانت React تعيد تصيير المكونات عن طريق لصق ملف

قمت بتقسيم المثال هنا: https://codesandbox.io/s/dynamic-size-of-react-window-list-items-nb038

تحرير: لقد أصلحت الحفظ - المقصود به التفاف المكون الوظيفي الأولي بالمذكرة - وليس ملف كما فعلت. إليك حل مذكّر في حالة وجود بنية DOM معقدة داخل قوائمهم (أو إذا كان عليهم تعيين مقاطع الفيديو كما أفعل): https://codesandbox.io/s/dynamic-size-of-react-window-list -البنود- ERT4

تحرير 2: اتضح أن العرض الأولي للصفوف جيد تمامًا ، لكن استدعاء resetAfterIndex يصعب إدارته. تتغير بياناتي (على سبيل المثال عندما يختار المستخدم محادثة مختلفة). لكن المشكلة الحقيقية هي أنه يبدو أن resetAfterIndex يعمل قبل أن ينتهي setSize . لذلك يقوم بمسح النمط المخزن مؤقتًا بنجاح ، ولكنه يقوم بعد ذلك بإنشاء ذاكرة تخزين مؤقت جديدة للأنماط القديمة مرة أخرى لأن المتصفح لم ينته من إعادة تحجيم المحتوى.

لست متأكدًا مما إذا كان ذلك منطقيًا في الكتابة ولكن لا بد لي من وضع دبوس في هذا الآن. يُرجى إعلامي إذا نجح أي شخص في تغيير محتواه ديناميكيًا والحفاظ على أنماط ارتفاع محدثة.

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

تحرير 3: سيكون هذا هو التعديل الأخير لأنني توصلت أخيرًا إلى حل شبه أنيق.

1.) إذا احتاجت بيانات العنصر إلى التغيير (أي عندما تتغير المحادثة) ، فقم بإلغاء تحميلها بالكامل المكون ثم أعد تحميله باستخدام itemData الجديد. يمكن القيام بذلك باستخدام استدعاء setState. يضمن ذلك عدم ترحيل أنماط الارتفاع القديمة عند تغيير بياناتك.

2.) لقد مررت {sizeMap, setSize, listRef} إلى ChatMessage عبر ChatContext . بهذه الطريقة ، بدلاً من مجرد تعيين الحجم بشكل أعمى ، يمكنني إخبار ChatMessage بتعيين الحجم ومقارنته بالحجم القديم. إذا كان الحجم القديم مختلفًا عن الحجم الجديد ، فقم باستدعاء resetAfterIndex بدءًا من index و تمرير true لفرض التحديث.

لذا تبدو رسالة ChatMessage الجديدة الخاصة بي كما يلي:

const ChatMessage = ({ message, index }) => {
    const { setSize, sizeMap, listRef } = useContext(ChatContext);
    const root = React.useRef();
    useEffect(() => {
        let oldSize = sizeMap[index];
        let newSize = root.current.getBoundingClientRect().height;
        setSize(index, newSize);
        if(newSize !== oldSize){
            listRef.current.resetAfterIndex(index,true);
        }
    }, [sizeMap, setSize, listRef]);

    return (
        <div ref={root}
             {message.body}
        </div>
    );
};
export default ChatMessage;

3.) أضفت ما هو في الأساس مستمع في المكون الذي ينتظر التثبيت حديثًا ليتم تقديمها. بمجرد تقديمه ، فإنه ينتقل إلى الأسفل. يعمل هذا على إصلاح مشكلة محاولة وضع وظيفة scrollTo مباشرة في componentDidMount لأنه لم يتم عرضه مطلقًا قبل استدعاء هذه الطريقة. وبالتالي يشبه هذا:

class Chat extends Component {
    constructor(props) {
        super(props);
        this.listRef = createRef();
        this.state = {
            initialScrollComplete: false,
            interval: null
        };
    }

    componentDidMount(){
        // Create interval to check if list is ready. Once ready, scroll to bottom of list.
        this.setState({interval: setInterval(()=>{
            if(this.listRef.current && !this.state.initialScrollComplete){
                this.listRef.current.scrollToItem(this.props.chatHistory.length - 1, "end");
                this.setState({initialScrollComplete: true});
            }
        },25)});
    }

    componentDidUpdate(prevProps, prevState) {

        // Clear interval if scroll has been completed
        if(!prevState.initialScrollComplete && this.state.initialScrollComplete){
            clearInterval(this.state.interval);
            this.setState({interval: null});
        }

        // If new message is transmitted, scroll to bottom
        if(prevProps.chatHistory && this.props.chatHistory && prevProps.chatHistory.length !== this.props.chatHistory.length){
            this.listRef.current.scrollToItem(this.props.chatHistory.length - 1, "end");
        }

    }

    render() {
        return <ChatHistory listRef={this.listRef} chatHistory={this.props.chatHistory}/>;
    }
}

يبدو أن هناك سلوكًا غريبًا حقًا في رحلات السفاري.

ارتفاع DynamicSizedList div والارتفاع أو الهامش العلوي للصفوف لا يعمل بشكل صحيح يبدأ المحتوى في التداخل.

عندما يتغير عرض النافذة / محتوى الصف ، لا يتم إعادة حساب الارتفاع الجديد أو تغييره للعمل مع الارتفاع الجديد للمحتوى.

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

لا يتم عرض المحتوى بشكل صحيح عند تحميل الصفحة الأولى ، لذا لا يبدو أن التحديث يحل المشكلة: /

كل ذلك يعمل بشكل جيد للغاية على المتصفحات الأخرى بما في ذلك Chrome و Firefox. Safari أمر مروع ولكن للأسف لا يزال التطبيق بحاجة إلى العمل مع الأشخاص الذين يستخدمونه.

يمكنني حقا استخدام بعض المساعدة!

tastyqbit لقد واجهت أيضًا نفس المشكلة على Safari و Internet Explorer. كما ذكرت ، فإن التمرير إلى ما بعد الصف الموسع ثم التمرير للخلف يسمح بعرضه بشكل صحيح ، لكن هذا بالطبع لا يحل المشكلة حقًا.

إذا وجدت أي حلول ، يرجى إعلامي!

afreixtastyqbit أنا متأكد تمامًا من أن مشكلاتك على Safari و Internet Explorer ناتجة عن نقص دعم ResizeObserver في تلك المتصفحات. كان لدي مشكلتك بالضبط (التمرير للخلف لإصلاحها) وإضافة polyfill حلها بالنسبة لي. راجع MDN للحصول على جداول التوافق.

أعتقد أن عدم وجود ResizeObserver يجب أن يولد تحذيرًا في وحدة التحكم.

ماذا عن شيء مثل هذا https://codesandbox.io/s/agitated-jennings-o9nn6 ؟

أساسي باستخدام VariableSizeList + ItemMeasurer من # 102 أعلم أن هذا نهج ساذج للغاية ولكن يبدو أنه يعمل نوعًا ما (ليس بهذا السوء 😂) كحل مؤقت 🤔

صادفنا في فريقنا الحاجة إلى تقديم قائمة كبيرة من البيانات النصية ذات الحجم العشوائي.
بالنسبة لنا ، كانت القدرة على القفز بدقة بين العناصر والتمرير دون أي تأخير أمر لا بد منه.
بعد قليل من البحث عبر الإنترنت استسلمت وكتبت هذه المكتبة .
آمل أن يساعد كحل مؤقت لبعضكم: smile_cat:

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

@ gnir-work ماذا لو تم تغيير حجم النافذة وتغير حجم الحاوية مما تسبب في تغيير حجم القائمة؟

قراءة هذا الموضوع وأعتقد أنه قد تكون هناك طريقة أفضل للتعامل مع العناصر التي يمكن أن يتغير عرضها.

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

الطريقة التي يمكن أن يعمل بها هذا هي الاستماع إلى التمرير على الوالد.

ستعمل الخوارزمية على النحو التالي:

• حساب الحجم المقدر لكل عنصر - يجب أن يكون هذا فعالاً للغاية. لا يجب أن تكون مثالية. + - 20٪ بخير.

• نحن نعرض فقط العناصر المرئية + نقول 20٪ أكثر حتى إذا قام المستخدم بالتمرير فلن يرى أي تغييرات

• لدينا "شبح" لكل شيء آخر تم ضبط "ارتفاعه" على الارتفاع المقدر. انها مجرد div فارغة. بهذه الطريقة يبدو شريط التمرير في الاتجاه الصحيح.

• يظهر العنصر فقط عندما يكون في منفذ العرض. بخلاف ذلك ، يتم عرض العناصر الشبح.

الجانب السلبي الوحيد لذلك هو أن ارتفاع شريط التمرير سيتغير قليلاً. لست متأكدًا مما إذا كان هذا سيشتت انتباه المستخدم. قد تكون إذا كانت قائمة التمرير كبيرة. قد نكون قادرين على خداع ذلك عن طريق زيادة / تقليل المخزن المؤقت بحيث لا تؤثر الأحجام المقدرة على طول شريط التمرير.

@ gnir-work ماذا لو تم تغيير حجم النافذة وتغير حجم الحاوية مما تسبب في تغيير حجم القائمة؟

اعتبارًا من الإصدار الأخير ( 2.2.0 ) ، يدعم المكون التغييرات في حجم القائمة بأكملها (الارتفاع والعرض).

قراءة هذا الموضوع وأعتقد أنه قد تكون هناك طريقة أفضل للتعامل مع العناصر التي يمكن أن يتغير عرضها.

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

الطريقة التي يمكن أن يعمل بها هذا هي الاستماع إلى التمرير على الوالد.

ستعمل الخوارزمية على النحو التالي:

• حساب الحجم المقدر لكل عنصر - يجب أن يكون هذا فعالاً للغاية. لا يجب أن تكون مثالية. + - 20٪ بخير.
• نحن نعرض فقط العناصر المرئية + نقول 20٪ أكثر حتى إذا قام المستخدم بالتمرير فلن يرى أي تغييرات
• لدينا "شبح" لكل شيء آخر تم ضبط "ارتفاعه" على الارتفاع المقدر. انها مجرد div فارغة. بهذه الطريقة يبدو شريط التمرير في الاتجاه الصحيح.
• يظهر العنصر فقط عندما يكون في منفذ العرض. بخلاف ذلك ، يتم عرض العناصر الشبح.

الجانب السلبي الوحيد لذلك هو أن ارتفاع شريط التمرير سيتغير قليلاً. لست متأكدًا مما إذا كان هذا سيشتت انتباه المستخدم. قد تكون إذا كانت قائمة التمرير كبيرة. قد نكون قادرين على خداع ذلك عن طريق زيادة / تقليل المخزن المؤقت بحيث لا تؤثر الأحجام المقدرة على طول شريط التمرير.

تم تنفيذ هذا بالفعل بواسطة bvaughn في react-virtualized . الجانب السلبي الرئيسي لهذا النهج هو أن القفز إلى صف معين لا يعمل بشكل جيد ويخلق أخطاء بصرية عند التمرير لأعلى.

@ gnir-work آه .. حسنًا ... ربما سأجهض عملي وأنظر إلى رد الفعل الافتراضي.

أعتقد أنك محق في مشكلات التمرير لأعلى ، لكنني أعتقد أنه يمكنني إصلاح ذلك من خلال الحصول على "حجم تقديري" ، ثم تحويله إلى الحجم الفعلي بمجرد تثبيت المكون.

... ولكن هناك مشكلة أخرى بالطبع هي التعامل مع المحتوى الديناميكي. إذا حدث شيء ما ، يتغير ارتفاع المكون.

إذا كان الحجم المقدر دقيقًا مما قد ينجح ، على سبيل المثال ، قمت منذ وقت ما بتنفيذ قائمة افتراضية ذات ارتفاع ديناميكي مع تفاعل افتراضي افتراضي وعمل جيدًا طالما كان الحجم المقدر دقيقًا. وإلا فإن وظيفة التمرير للصف ستؤدي إلى تعطيل تطبيقي ☹

مُرسَل من Mail لنظام التشغيل Windows 10

من: كيفن بيرتون
تاريخ الإرسال: الثلاثاء ، 14 أبريل 2020 ، الساعة 23:07
إلى: bvaughn / رد فعل النافذة
نسخة إلى: نير جيلر ؛ أشير
الموضوع: Re: [bvaughn / رد فعل نافذة] دعم المحتوى المقاس في الوقت المناسب (# 6)

@ gnir-work آه .. حسنًا ... ربما سأجهض عملي وأنظر إلى رد الفعل الافتراضي.
أعتقد أنك محق في مشكلات التمرير لأعلى ، لكنني أعتقد أنه يمكنني إصلاح ذلك من خلال الحصول على "حجم تقديري" ، ثم تحويله إلى الحجم الفعلي بمجرد تثبيت المكون.
... ولكن هناك مشكلة أخرى بالطبع هي التعامل مع المحتوى الديناميكي. إذا حدث شيء ما ، يتغير ارتفاع المكون.
-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بإلغاء الاشتراك.

-
تم فحص هذا البريد الإلكتروني بحثًا عن فيروسات بواسطة برنامج Avast لمكافحة الفيروسات.
https://www.avast.com/antivirus

@ gnir-work آه ... لست بحاجة إلى وظيفة "التمرير للصف" على ما أعتقد .. على الرغم من أنني ربما أكون مخطئًا.

أن يكون هذا كافياً لاحتياجاتك 😊

مُرسَل من Mail لنظام التشغيل Windows 10

من: كيفن بيرتون
تاريخ الإرسال: الثلاثاء ، 14 أبريل 2020 الساعة 23:13
إلى: bvaughn / رد فعل النافذة
نسخة إلى: نير جيلر ؛ أشير
الموضوع: Re: [bvaughn / رد فعل نافذة] دعم المحتوى المقاس في الوقت المناسب (# 6)

@ gnir-work آه ... لست بحاجة إلى وظيفة "التمرير للصف" على ما أعتقد .. على الرغم من أنني ربما أكون مخطئًا.
-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بإلغاء الاشتراك.

-
تم فحص هذا البريد الإلكتروني بحثًا عن فيروسات بواسطة برنامج Avast لمكافحة الفيروسات.
https://www.avast.com/antivirus

كحل بديل إذا:

• يعتمد ارتفاع صف قائمتك على النص الداخلي فقط (بالإضافة إلى بعض العناصر ذات الأبعاد المحددة)
• وقائمتك لها عرض ثابت

يمكنك استخدام CanvasRenderingContext2D.measureText () لحساب ارتفاع الصف بدلاً من عرض المكون بالكامل: أنبوب:

كود ساندبوكس

bvaughn هل توجد أي خطط لنشر إصدار ألفا جديد على npm؟ لم يكن لدينا أي تحديث منذ 1.6.0-alpha.1 😕

bvaughn أي تحديثات؟ هل سيتم إصلاحه في الإصدارات الأخيرة؟

بالنسبة لأولئك الذين يرغبون في استخدام Typescript مع DynamicSizeList - يمكن أن توفر زيادة الوحدة الأنواع المطلوبة لـ DynamicSizeList للعمل من تعريفات DefinitelyTyped (حل بديل لاستعلامي المنشور في هذا الموضوع العام الماضي).

يضاف ما يلي الى المشروع:

import React, { Component } from 'react'

declare module 'react-window' {
  export type DynamicSizeListProps = Omit<FixedSizeListProps, 'itemSize' | 'scrollToItem'>
  export class DynamicSizeList extends Component<DynamicSizeListProps> {}
}

ثم قم بالاستيراد كالمعتاد:

import {
  DynamicSizeList,
  DynamicSizeListProps,
} from 'react-window'

// use as normal...

@types/react-window لا يزال يحتاج إلى تثبيت لأول مرة ل FixedSizeListProps تعريف.

شكرا لأشكال الكتابة ، سنقوم بإضافتها الآن! لقد كنت أستخدم DynamicSizeList في المنتج منذ أكثر من عام الآن. يعتمد حاليًا على هذه الشوكة: "@john-osullivan/react-window-dynamic-fork": "^1.9.0-alpha.1" (هل هذا هو أحدث شيء لا يزال حتى الآن؟). حاولت التبديل إلى react-virtuoso بسبب عدم اليقين حول ما إذا كان سيتم إصدار هذا بالفعل / متى. لكنها وجدت أنها أقل أداءً وتمسكها مع هذا.

bvaughn هل حان الوقت بعد لتمهيد رعاة البقر وتحرير هذا إلى npm؟ ربما أعيدت تسميته للتو إلى ExperimentalDynamicSizeList إذا كنت لا تزال قلقًا بشأن عدم استعداده.

مرحبا يا شباب! شكرا لعملكم الجاد وهذه المكتبة العظيمة. أنا أتطلع حقًا لهذه الميزة! ومع ذلك ، أود أن أقترح إضافة معلومات بخصوص هذه المسألة إلى التمهيدي والوثائق / الأمثلة. لقد استغرق الأمر بعض الوقت لمعرفة أن المحتوى الديناميكي غير مدعوم فعليًا من قبل المكتبة وهو مفيد فقط للعناصر ذات الحجم الثابت / المعروف. أعتقد أن برنامج README يحتوي على قسم أسئلة وأجوبة لطيف حيث يمكن إضافة هذا.

إذا كنت تبحث عن جدول / شبكة / شجرة ، فستكون هذه بداية جيدة https://autodesk.github.io/react-base-table/examples/dynamic-row-heights ، مبنية على VariableSizeGrid

@ tony-scio هل يمكنك من فضلك مشاركة كود و صندوق عمل لاستخدام DynamicSizeList من 1.6.0-alpha.1 مع InfiniteLoader؟ شكرا ، سأكون ممتنا حقا.

هل حصل أي شخص على هذا للعمل مع رد فعل جميل؟ يبدو أن السحب يجعل العناصر تقفز فوق بعضها البعض.

هل حصل أي شخص على هذا للعمل مع رد فعل جميل؟ يبدو أن السحب يجعل العناصر تقفز فوق بعضها البعض.

سأنتظر أيضًا هذه الإجابة: د

[يساعد]
لا يوجد رمز للعرض على هذا الرابط:
ديناميكية-حجم-قائمة-عمودية
وأنا بحاجة إلى هذه القدرة.
شكرا

[يساعد]
لا يوجد رمز للعرض على هذا الرابط:
ديناميكية-حجم-قائمة-عمودية
وأنا بحاجة إلى هذه القدرة.
شكرا

https://react-window-next.now.sh/#/examples/list/dynamic -size

أي تحديث على هذا؟ نحتاج إلى شيء مشابه قدر الإمكان (عادة ما يكون قليلًا جدًا ، ولكن في بعض الحالات يمكن أن يكون كثيرًا) تقديم قائمة شبكة كبيرة متجاوبة من العناصر (ارتفاعاتها ديناميكية وستتغير على الهاتف المحمول مع التفاف النص المتنوع ، إلخ) أشعر أن react-window سيغير قواعد اللعبة إذا كان بإمكانه التعامل مع حالة الاستخدام هذه. إذا لم يكن كذلك ، فهل هناك أي بدائل موثوقة؟

أي تحديث على هذا؟ نحتاج إلى شيء مشابه قدر الإمكان (عادة ما يكون قليلًا جدًا ، ولكن في بعض الحالات يمكن أن يكون كثيرًا) تقديم قائمة شبكة كبيرة متجاوبة من العناصر (ارتفاعاتها ديناميكية وستتغير على الهاتف المحمول مع التفاف النص المتنوع ، إلخ) أشعر أن react-window سيغير قواعد اللعبة إذا كان بإمكانه التعامل مع حالة الاستخدام هذه. إذا لم يكن كذلك ، فهل هناك أي بدائل موثوقة؟

JavaJamie نظرًا لأنك طلبت على وجه التحديد بدائل - تأتي مكتبة رد فعل مبدع مع دعم مدمج لقياس المحتوى الديناميكي. إخلاء المسؤولية: أنا مؤلفها.

JavaJamie نظرًا لأنك طلبت على وجه التحديد بدائل - تأتي مكتبة رد فعل مبدع مع دعم مدمج لقياس المحتوى الديناميكي. إخلاء المسؤولية: أنا مؤلفها.

رد الفعل - الموهوب هو أيضًا ضعف حجم نافذة التفاعل. يجب دائمًا مراعاة حجم التبعية.

https://bundlephobia.com/result؟[email protected]
https://bundlephobia.com/result؟[email protected]

لقد قبلت حقيقة أنه ليس لدي الوقت أو الطاقة لإنهاء هذا الجهد. إذا رغب أي شخص في التدخل وإنهاء الفرع الذي بدأته ، أرحب بمساعدتك. (يُرجى أيضًا الاطلاع على المشكلة رقم 302 لمعرفة مدى توافق ذلك مع الإصدار الثاني كمكوّنات جديدة List و Grid .)

لقد انتهينا من تنفيذ شيء ما من الصفر لهذا الغرض مثل استخدام مستشعرات الرؤية التي عملت بشكل جيد حقًا.

ربما يمكنني استخدام OSS أو توجيهكم إلى المكان الصحيح إذا كنتم تريدون إزالته وإنشاء مشروع جديد أو نقله هنا.

إحدى الحيل هي أننا استخدمنا "الكتل" حتى نتمكن من زيادة الأداء. في الأساس ، نأخذ كل صف ، ونضعه بالفعل في كتلة رئيسية من 25 عنصرًا ، ثم نبدلها عند الضرورة.

burtonator سيكون مفيدًا حقًا

هل يمكن لأي شخص توفير تنفيذ خالٍ من الأخطاء لتحديد رد الفعل باستخدام DynamicSizeList؟
لا يمكنني جعله يعمل بشكل جيد معًا.
أواجه حاليًا مشكلتين (آسف لعدم وجود لقطات شاشة):

1. تحتوي جميع العناصر على style={position: absolute, left: 0, top: 0} وهو ما لا يسمح لي باستخدام هذا النمط نظرًا لأن جميع الخيارات تجلس فوق بعضها البعض.
2. إذا لم أستخدم دعامة النمط ، فستظهر القائمة جيدًا ، ولكن عندما أقوم بالتمرير قليلاً ، يتقلص جزء القائمة الذي يحتوي على خيارات فيه ، بينما يظل الارتفاع الإجمالي دون تغيير. وبالتالي ، عندما أقوم بالتمرير ، أحصل على x بكسل من الخيارات الفعلية ومساحة بيضاء بطول × بكسل.

تعذر العثور على أي مثال عملي للاثنين.
سألاحظ أنني أستخدم 1.9.0 fork على Chrome.

يحرر. وجدت إجابة هنا أعلاه ، في قسم التعليقات المخفية. https://github.com/bvaughn/react-window/issues/6#issuecomment -509016422

قد يكون أحد التبسيط لمشكلة التمرير هو استخدام شريط التمرير للإشارة إلى فهرس العنصر في القائمة بدلاً من موضع البكسل ، إذا كان التمرير على بُعد أكثر من ارتفاع منفذ عرض واحد تقريبًا. بدلاً من محاولة "التمرير لأسفل" X بكسل ، يعرض المكون ببساطة العناصر حول الفهرس المطلوب. يتم عرض العنصر في منتصف الطريق لأسفل في الفهرس N / 2 ، وفي الأسفل يتم عرض العنصر في الفهرس N-1.

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