Question

你是对的，我没有正确传递道具。现在我把它设置为：

Container.jsx

<div className='container' ref={(ref) => {this.foo = ref;}}>
  this.renderContainer()
</div>

<Section scrollContainer={this.foo}/>

Section.jsx（只是传递道具）

<Panel scrollContainer={this.props.scrollContainer}/>

Section.propTypes = { scrollContainer: PropTypes.object.isRequired }

Panel.jsx（传递道具）

<RenderedTable scrollContainer={this.props.scrollContainer} />

RenderedTable.jsx

return (
  <div className='padding-top-20 font-smoothing'>
    <WindowScroller scrollElement={this.props.scrollContainer}>
      {({ height, isScrolling, scrollTop, onChildScroll }) => (
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table

不幸的是windowScroller仍然没有调整大小。我也没有得到任何警告或错误。你是否使用CSS技巧让卷轴调整大小？我在示例https://bvaughn.github.io/react-virtualized/#/components/WindowScroller中看到了这一点在将scrollElement从window更改为scrollingBody时更改flex和overflow属性。

我知道你很忙，非常感谢你的帮助！

Answer 1

在您的示例中，您已将滚动参考分配给this.tabsContainer，但您尝试将其作为this.props.tabContainer进行访问。这是你的错误，或者示例是不完整的，需要更多的上下文。 :)你能提供一个Plnkr吗？

React Virtualized windowscroller scrollElement无效

1 个答案: