react-bootstrap tabPane

最近修改 superset 的项目，各种坑各种踩。本以为我以后用不上 react 框架了，没想到修改这个项目的源码，赶上了 react。

这次的坑来源于这个需求：superset做移动端嵌入，在 tab 标签切换到别的再切换回来的时候，希望还能保持原本的滚动位置。

我考察了一下发现滚动位置互相扰乱的原因是，滚动的是html元素，也就是这个页面整个是滑动的，所以切换到别的 tab，虽然切换完的没有滚动，但还是保留了上一个的滚动位置。

闲话不多说，修改思路：tab 切换的时候记录下 html 的 scrollTop，切换回来的时候再赋上。

难点：TabPane 这个组件，显示的是从 react-bootstrap 中 import 进来的，然而找不到文档（也可能是我太废 ==）

解决方向：node_modules 里面找源码

分别找到了 onExit 和 onEnter 这两个方法，看起来就是能用的样子

<TabPane
    key={index === 0 ? DASHBOARD_GRID_ID : id}
    eventKey={index}
    onExit={this.handleTabExit}
    onEnter={this.handleTabEnter}
>
    <DashboardGrid
        gridComponent={dashboardLayout[id]}
        // see isValidChild for why tabs do not increment the depth of their children
        depth={DASHBOARD_ROOT_DEPTH + 1} // (topLevelTabs ? 0 : 1)}
        width={width}
        isComponentVisible={index === tabIndex}
    />
</TabPane>

添加 onExit、onEnter

以当前 tab 的 id 作为 key 值，储存当前 tab 的滚动位置

（里面有些代码写的可能不是很规范，react有很久没有用了用的不熟练，欢迎交流哈~）

constructor(props) {
    super(props);
    this.state = {
      tabScrollTop: {}
    };
}
handleTabExit(data) {
    let tabScrollTop = this.state.tabScrollTop;
    let scrollingElement = document.scrollingElement || document.querySelector('html');
    tabScrollTop[data.id] = scrollingElement.scrollTop;
    this.setState({
      tabScrollTop: tabScrollTop
    })
}

handleTabEnter(data) {
    let tabScrollTop = this.state.tabScrollTop;
    let scrollingElement = document.scrollingElement || document.querySelector('html');
    tabScrollTop[data.id] ? (scrollingElement.scrollTop=tabScrollTop[data.id]) : (scrollingElement.scrollTop=0);
}

就酱~

这次的重点，在没有足够的文档支撑的时候，还是要学会自己去插件里找轮子~