React-window: لا يعمل Autosizer مع نافذة التفاعل

يعمل مكون الحجم التلقائي _definitely_ مع هذه المكتبة. تحقق من الأسئلة الشائعة:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-a-page

نأسف لأنك لم تتلق الكثير من الردود من Stack Overflow ، لكنني أعتقد أن هذا لا يزال هو المكان المناسب للذهاب لهذا النوع من الأسئلة (على افتراض أنك قرأت الأسئلة الشائعة أولاً: wink :)

كما قلت إنه يعمل بالتأكيد ، هل يمكنك أن ترشدني لماذا لا يعمل معي؟

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

يعمل في نفس المشكلة هنا. أنا لا أجعله يعمل على الإطلاق. تغيير رمز التصحيح:

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

عندما أستخدم AutoSizer من الحزمة المخصصة ( import AutoSizer from "react-virtualized-auto-sizer"; ) لا أحصل على أي مخرجات.

عندما أستخدمه من react-virtualized (استيراد {AutoSizer} من "رد فعل افتراضي") أحصل على المخرجات: 0 0 و 0 1806

يذهلني تمامًا لماذا لا يعمل (

يعمل في نفس المشكلة هنا. أنا لا أجعله يعمل على الإطلاق. تغيير رمز التصحيح:

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

عندما أستخدم AutoSizer من الحزمة المخصصة ( import AutoSizer from "react-virtualized-auto-sizer"; ) لا أحصل على أي مخرجات.

عندما أستخدمه من react-virtualized (استيراد {AutoSizer} من "رد فعل افتراضي") أحصل على المخرجات: 0 0 و 0 1806

يذهلني تمامًا لماذا لا يعمل (

نفس المشكلة! هل وجدت الحل

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

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

تمكنت من الحصول على <AutoSizer /> من الحزمة المخصصة التي تعمل مع react-window حتى حاولت استخدام ref على <List /> . لن يتم تعيين المرجع بشكل صحيح ، لذلك اضطررت للعودة إلى استخدام AutoSizer من react-virtualized .

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

آمل أن يساعد الآخرين

أواجه نفس المشكلة باستخدام TypeScript.

export 'AutoSizer' was not found in 'react-virtualized-auto-sizer'

تحرير: تم العثور على إصلاح.

الحزمة @types/react-virtualized-auto-sizer لا تحدد بشكل صريح مكون AutoSizer .

بدلاً من ذلك ، يقوم بتصدير ما يلي كفئة افتراضية:
export default class extends React.Component<AutoSizerProps> {}

يمكنك استيراد هذا كـ AutoSizer مثل ذلك:
import AutoSizer from 'react-virtualized-auto-sizer';

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

من المستندات
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)

سيكون من الرائع لو تمكنا من تمرير خاصية لتجاوز هذا السلوك وجعل AutoSizer يمد الأصل إلى حجمه.

لدي نفس المشكلة أيضا.

تمكنت من الحصول على <AutoSizer /> من الحزمة المخصصة التي تعمل مع react-window حتى حاولت استخدام ref على <List /> . لن يتم تعيين المرجع بشكل صحيح ، لذلك اضطررت للعودة إلى استخدام AutoSizer من react-virtualized .

أواجه نفس المشكلة كيف تصلحها؟

أواجه نفس المشكلة كيف تصلحها؟

أنا أستخدم المعيار <AutoSizer /> مرة أخرى

import { AutoSizer } from 'react-virtualized'

نفس المشكلة بالنسبة لي. يقوم AutoSizer بتعيين الارتفاع على 0 عند الاستخدام مع نافذة التفاعل. أنا أستخدم أيضًا AutoSizer من التفاعل الافتراضي مع نافذة التفاعل.

المستندات الأصلية

هل يمكنني استخدام AutoSizer داخل حاوية مرنة؟

عند استخدام AutoSizer كطفل مباشر للمربع المرن ، فمن الأفضل عادةً لفه باستخدام div ، مثل:

<div style={{ display: 'flex' }}>
  <!-- Other children... -->
  <div style={{ flex: '1 1 auto' }}>
    <AutoSizer>
      {({ height, width }) => (
        <Component
          width={width}
          height={height}
          {...props}
        />
      )}
    </AutoSizer>
  </div>
</div>

لقد عانيت من نفس الأخطاء التي واجهتها يا رفاق ، وبعد فترة ، تمكنت من إنجاحها.
يحدث أنك تحتاج إلى ضبط ارتفاع وعرض الحاوية الخارجية. خلاف ذلك ، فإنه لن يجعل الأطفال.
تحقق من هذا المثال https://codesandbox.io/s/crazy-zhukovsky-kteok؟file=/src/app.js : 277-312