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

Question

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

Answer 1

2应该一起工作,是的.我相信可能的问题是反应虚拟化组件的宽度或高度为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>
  )
}