使用airbnb /酶進行反應 - 虛擬化工作嗎？

是否有可能將反應 - 虛擬化和酶聯合使用？當我嘗試將它們一起使用時，我似乎在網格中得到一個空的項目列表。使用airbnb /酶進行反應 - 虛擬化工作嗎？

2016-06-14 camwest

您確定您將寬度和高度> 0傳遞給網格嗎？（你有可能分享一些代碼嗎？） – brianvaughn

讓我來舉一個簡單的例子。 – camwest

我認爲問題在於我正在使用Autosizer。將繼續調查... – camwest

2應該一起工作，是的。我相信可能的問題是react-virtualized組件的寬度或高度爲0，導致它不呈現任何東西。（它只呈現足以填充它所具有的「窗口」。）

假設您使用AutoSizer HOC-（大多數人都這麼做） - 那麼我發現有一種模式是有用的，那就是導出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> 
) 
}

來源

2016-06-14 22:20:27 brianvaughn

我忘了提到一件事。我使用jsdom在node.js中使用酶。 AutoSizer是否依靠真正的DOM測量API？ – camwest

它依賴於'getBoundingClientRect'和'getComputedStyle'。你可以在這裏看到它是如何測量的：https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js#L93 – brianvaughn

好，那麼你的建議繞過AutoResizer是自從最好的一個getBoundingClientRect在jsdom中不準確。 – camwest

在我的測試情況下，把這個工作對我來說：

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，但其他圖書館都有自己的覆蓋功能的方法。請記住，這對於未來對react-virtualized庫的更改（this._setRef剛剛從源代碼中抽出）非常脆弱，並且可能會給您帶來誤報。

來源

2016-12-16 07:08:08 Chris

截至react-virtualized 9.12.0 Autosizer擁有defaultWidth和defaultHeight屬性。我發現設置這些意味着酶測試正確運行 - 按照預期渲染子行。

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

來源

2017-11-20 15:56:47

使用airbnb /酶進行反應 - 虛擬化工作嗎？

回答

相關問題