Question

是否可以将反应虚拟化和酶一起使用？当我尝试一起使用它们时，我似乎在网格中得到一个空列表。

Answer 1

2应该一起工作，是的。我相信可能的问题是反应虚拟化组件的宽度或高度为0，导致它不呈现任何内容。（它只能渲染到足以填满＆＃34;窗口＆＃34;它有。）

假设您正在使用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>
  )
}

Answer 2

自反应虚拟化9.12.0起，Autosizer具有defaultWidth和defaultHeight属性。我发现设置那些意味着酶测试正确运行 - 按预期呈现子行。

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

Answer 3

把它放在我的测试用例中对我有用：

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...

我在这里使用Jasmine的spyOn，但其他库有自己的覆盖功能的方法。请记住，这对于反应虚拟化库的未来更改非常脆弱（this._setRef刚从源代码中删除），并且可能会给你误报。

反应虚拟化是否与airbnb /酶一起使用？

3 个答案: