반응 가상화가 airbnb/효소와 작동합니까?

Question

반응 가상화와 효소를 함께 사용할 수 있습니까? 함께 사용하려고 할 때 그리드에 항목 목록이 비어있는 것 같습니다.

Answer 1

2는 함께 작동해야합니다. 가능성이있는 문제는 반응 가상화 된 구성 요소에 너비 또는 높이 0이 주어져서 아무 것도 렌더링하지 못한다는 것입니다.

당신이 AutoSizer HOC를 사용한다고 가정하면 (대부분 사람들이하는 것), 내가 찾은 한 가지 유용한 패턴은 두 가지 버전의 구성 요소를 내보내는 것입니다. 하나는 명시적인 폭/높이 속성을 필요로하고 다른 하나는 AutoSizer로 래핑합니다. 의사 코드는 다음과 같습니다 내 테스트 케이스에서이 퍼팅

이

import { AutoSizer, VirtualScroll } from 'react-virtualized' 

// Use this component for testing purposes so you can explicitly set width/height 
export function MyComponent ({ 
    height, 
    width, 
    ...otherProps 
}) { 
    return (
    <VirtualScroll 
     height={height} 
     width={width} 
     {...otherProps} 
    /> 
) 
} 

// Use this component in your browser where auto-sizing behavior is desired 
export default function MyAutoSizedComponent (props) { 
    return (
    <AutoSizer> 
     ({ height, width }) => (
     <MyComponent 
      height={height} 
      width={width} 
      {...props} 
     /> 
    ) 
    </AutoSizer> 
) 
} 

Answer 2

나를 위해 일한 :

import { AutoSizer } from 'react-virtualized'; 

// ... 

it('should do something', function() { 
    spyOn(AutoSizer.prototype, 'render').and.callFake(function render() { 
     return (
      <div ref={this._setRef}> 
       {this.props.children({ width: 200, height: 100 })} 
      </div> 
     ); 
    }); 

    // do something... 

는 여기 재스민의 spyOn를 사용하지만, 다른 라이브러리 함수를 덮어 자신의 방법이있다. 반응 가상화 라이브러리 ( this._setRef)가 향후 소스 코드에서 변경되었을 때 매우 취약하기 때문에 오탐 (false positive)이 발생할 수 있습니다.

Answer 3

현재 9.12.0 반응 가상화는 defaultWidth 및 defaultHeight 속성을가집니다. 효소 테스트가 올바르게 실행되었다는 것을 발견했습니다. 예상대로 자식 행을 렌더링했습니다.

<AutoSizer disableHeight defaultWidth={100}> 
    {({ width }) => (
    .... 
)} 
</AutoSizer>