React-window: Autosizer는 반응 창에서 작동하지 않습니다.

자동 크기 측정기 구성 요소 _definitely_는이 라이브러리와 함께 작동합니다. FAQ를 확인하십시오.
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Stack Overflow로부터 많은 응답을받지 못해 죄송합니다.하지만 여전히 이런 종류의 질문에 대한 올바른 위치라고 생각합니다 (FAQ를 먼저 읽었다 고 가정하면 : wink :).

당신이 그것이 확실히 작동한다고 말했듯이, 당신은 그것이 나를 위해 작동하지 않는 이유를 안내해 줄 수 있습니까?

이미 FAQ를 읽었지만 window.innerHeigth / Width를 사용하지 않는 한 페이지에 이미지가 표시되지 않기 때문에 문제는 높이와 너비가 0입니다. 나는 내 코드를 붙여 넣었고 문서가 많이 도움이되지 않기 때문에 무엇이 문제인지 모르겠습니다.
제 질문을 잘 이해 하셨기를 바랍니다. Pls는 더 많은 설명을 위해 저에게 알려줍니다.

여기에서 같은 문제에서 실행됩니다. 나는 그것을 작동시키지 않는다. 디버깅을위한 코드 변경 :

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

전용 패키지 ( import AutoSizer from "react-virtualized-auto-sizer"; )에서 AutoSizer를 사용할 때 출력이 없습니다.

react-virtualized ( '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>

전용 패키지 ( import AutoSizer from "react-virtualized-auto-sizer"; )에서 AutoSizer를 사용할 때 출력이 없습니다.

react-virtualized ( 'react-virtualized'에서 {AutoSizer} 가져 오기)에서 사용하면 0 0 및 0 1806

작동하지 않는 이유가 완전히 마음에 들었 습니다 (

같은 문제! 해결책을 찾았습니까?

또한 똑같은 문제가 발생합니다. react-virtualized에 포함 된 버전으로 전환하면 문제가 해결되지만 react-window와 함께 독립형으로 사용하는 것을 선호합니다.

여기에도 같은 문제가 있습니다.

내가 얻을 수 있었다 <AutoSizer /> 작업 전용 패키지에서 react-window 내가 사용하려고 할 때까지 ref 에 <List /> . ref를 올바르게 설정하지 않았으므로 react-virtualized 에서 AutoSizer를 사용하도록 다시 전환해야했습니다.

따라서 소스 코드에서 요소에 계산 된 너비가없는 것처럼 보이지만 단순히 자식을 렌더링하지 않습니다. 나는 여전히 실제 구현을 가지고 놀아야하지만 내 컨테이너가 크기 (고정 또는 플렉스 사용 여부)가있는 한 출력을 렌더링하는 것처럼 보입니다.

다른 사람들을 돕는 희망

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가 부모를 해당 크기로 늘리도록 prop을 전달할 수 있다면 좋을 것입니다.

같은 문제도 있습니다.

내가 얻을 수 있었다 <AutoSizer /> 작업 전용 패키지에서 react-window 내가 사용하려고 할 때까지 ref 에 <List /> . ref를 올바르게 설정하지 않았으므로 react-virtualized 에서 AutoSizer를 사용하도록 다시 전환해야했습니다.

나는 같은 문제가 있습니다. 어떻게 해결합니까?

나는 같은 문제가 있습니다. 어떻게 해결합니까?

표준 <AutoSizer /> 다시 사용하고 있습니다.

import { AutoSizer } from 'react-virtualized'

나에게도 같은 문제입니다. AutoSizer는 반응 창과 함께 사용할 때 높이를 0으로 설정합니다. 또한 react-window로 가상화 된 react에서 AutoSizer를 사용하고 있습니다.

원본 문서

플렉스 컨테이너 내에서 AutoSizer를 사용할 수 있습니까?

AutoSizer를 flex box의 직접적인 자식으로 사용할 때 일반적으로 다음과 같이 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