React-window: ऑटोसाइज़र रिएक्शन-विंडो के साथ काम नहीं करता है

इस पुस्तकालय के साथ ऑटो sizer घटक _definitely_ काम करता है। अक्सर पूछे जाने वाले प्रश्न देखें:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-a-width-or-height-of-a-page

क्षमा करें, आपने स्टैक ओवरफ़्लो से बहुत अधिक प्रतिक्रिया नहीं प्राप्त की है, लेकिन मुझे लगता है कि इस तरह के प्रश्न के लिए अभी भी सही जगह है (यह मानकर कि आपने पहले प्रश्न पढ़े हैं: wink :)

जैसा कि आपने कहा कि यह निश्चित रूप से काम करता है, क्या आप pls मुझे मार्गदर्शन कर सकते हैं कि यह मेरे लिए काम क्यों नहीं कर रहा है?

मैंने पहले ही FAQs पढ़ लिए हैं, लेकिन समस्या ऊँचाई और चौड़ाई शून्य है जिसके कारण पृष्ठ पर कोई छवि प्रदर्शित नहीं होती है जब तक कि मैं window.innerHeigth / Width का उपयोग नहीं करता। मैंने एसओ पर अपना कोड चिपका दिया है और मुझे नहीं पता कि इसमें क्या गलत है क्योंकि डॉक्स ज्यादा मदद नहीं कर रहा है।
मुझे उम्मीद है कि आप मेरे सवाल को अच्छी तरह से समझ गए होंगे। Pls मुझे अधिक स्पष्टीकरण के लिए पता है।

यहां एक ही अंक में चल रहा है। मैं पूरी तरह से काम करने के लिए नहीं मिलता है। डिबगिंग के लिए कोड बदलना:

  <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

पूरी तरह से मेरे दिमाग को उड़ा देता है कि यह काम क्यों नहीं करता ( कोडैंडबॉक्स उदाहरण उसी ब्राउज़र पर काम करता है)

एक ही मुद्दा! क्या आपने समाधान पाया है?

इसके अलावा एक ही मुद्दा हो रही है। प्रतिक्रिया-वर्चुअलाइज्ड में शामिल संस्करण में स्विच करने से समस्या ठीक हो जाती है, लेकिन मैं इसे स्टैंडअलोन w / रिएक्शन-विंडो का उपयोग करना पसंद करूंगा।

मैं यहाँ एक ही मुद्दा रहा हूँ।

मैं प्राप्त करने में सक्षम था <AutoSizer /> समर्पित के साथ काम कर पैकेज से react-window जब तक मैं का उपयोग करने की कोशिश की ref पर <List /> । यह रेफ को सही तरीके से सेट नहीं करेगा, इसलिए मुझे react-virtualized से AutoSizer का उपयोग करने के लिए वापस स्विच करना पड़ा।

इसलिए स्रोत कोड में ऐसा लगता है कि अगर तत्व पर कोई गणना की गई चौड़ाई नहीं है, तो यह बस बच्चों को प्रस्तुत नहीं करता है। मुझे अभी भी वास्तविक कार्यान्वयन के साथ खेलना है, लेकिन ऐसा लगता है कि जब तक मेरे कंटेनर का आकार है (चाहे फिक्स्ड या फ्लेक्स या कुछ का उपयोग करके), यह आउटपुट प्रदान करेगा

आशा है कि दूसरों की मदद करता है

मैं टाइपस्क्रिप्ट का उपयोग कर एक ही मुद्दा रहा हूँ।

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 /> समर्पित के साथ काम कर पैकेज से react-window जब तक मैं का उपयोग करने की कोशिश की ref पर <List /> । यह रेफ को सही तरीके से सेट नहीं करेगा, इसलिए मुझे react-virtualized से AutoSizer का उपयोग करने के लिए वापस स्विच करना पड़ा।

मैं एक ही मुद्दा है कि आप इसे कैसे ठीक कर रहे हैं?

मैं एक ही मुद्दा है कि आप इसे कैसे ठीक कर रहे हैं?

मैं मानक <AutoSizer /> फिर से उपयोग कर रहा हूं

import { AutoSizer } from 'react-virtualized'

मेरे लिए भी यही मुद्दा है। AutoSizer प्रतिक्रिया विंडो के साथ उपयोग करते समय ऊंचाई को 0 पर सेट करता है। मैं भी प्रतिक्रिया खिड़की के साथ virtualized प्रतिक्रिया से AutoSizer का उपयोग कर रहा हूँ।

मूल डॉक्स

क्या मैं फ्लेक्स कंटेनर के भीतर ऑटोसाइज़र का उपयोग कर सकता हूं?

एक फ्लेक्स बॉक्स के प्रत्यक्ष बच्चे के रूप में ऑटोसाइज़र का उपयोग करते समय यह आमतौर पर एक डिव के साथ इसे लपेटने के लिए सबसे अच्छा काम करता है, जैसे:

<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