reactjs - 将 SwipeableViews 与 updateHeight() 结合使用

Question

SwipeableViews 的新更新允许 MaterialUI 选项卡组件中的每个选项卡都有自己的高度。让我稍微退缩一下。之前，MaterialUI Tabs 组件会以最长选项卡的高度显示所有选项卡。这在不需要它的选项卡上创建了不必要的滚动。 SwipeableViews 最近通过将其添加到其组件中来解决此问题

<SwipeableViews
   action={actions => {this.swipeableActions = actions;}}>
   <div>{'slide n°1'}</div>
   <div>{'slide n°2'}</div>
   <div>{'slide n°3'}</div>
</SwipeableViews>

和

componentDidUpdate() {
    this.swipeableActions.updateHeight();
}

这修复了加载状态下选项卡之间的高度问题。但是当项目被隐藏并通过点击事件显示时，高度仍然存在并且显示的项目不显示(从 View 中被切断)

查看图片(imgur 加载图片失败)改为查看图片链接

image

Answer 1

您需要添加:
动画高度
到 SwipeableViews 组件。

您可能还必须将函数向下传递给子组件，以便在子组件修改 View 时更新高度。

UpdateSwipeableViewHeight = () => {
 if (this.swipeableActions) this.swipeableActions.updateHeight()
};


<SwipeableViews
 id="searchTabsSwipeableView"
 axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
 index={activeTabIndex}
 onChangeIndex={index => {
    this.handleChange(null, index);
    this.UpdateSwipeableViewHeight();
  }
}
action={actions => (this.swipeableActions = actions)}
animateHeight
>
<div className={classes.swipableViewsComponent}>
 <ChildComponent updateHeight={this.UpdateSwipeableViewHeight} />
</div>