反応仮想化はairbnb /酵素と機能しますか？

Question

反応仮想化と酵素を併用することは可能ですか？それらを一緒に使用しようとすると、グリッドに空のアイテムのリストが表示されるようです。

Answer 1

2は一緒に機能するはずです。私は可能性のある問題は、反応仮想化されたコンポーネントに幅や高さ0が与えられているため、何もレンダリングされないということです。

あなたがAutoSizer HOCを使用していると仮定すると（ほとんどの人はそうです）、私が参考にした1つのパターンは、2つのバージョンのコンポーネントをエクスポートすることです。明示的な幅/高さのプロパティを必要とするものと、もう一方を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がソースコードからちょうど取り除かれた）の将来の変更に対してかなり脆弱であり、誤認をもたらす可能性があることに注意してください。

Answer 3

as react-virtualized 9.12.0では、オートサイザーはdefaultWidthとdefaultHeightのプロパティを持っています。 酵素テストが正しく実行されていることを確認しました。

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