reactjs - 通过 updateHeight() 使用 SwipeableViews

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();
}

这解决了加载状态下选项卡的高度问题。但是当项目被隐藏并通过点击事件显示时，高度仍然存在并且显示的项目不显示（被从视图中截断）

查看图片（imgur 无法加载图片）查看图片链接

图片

Answer 1

您需要将： animateHeight 添加到 SwipeableViews 组件。

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

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>