前言：最近接的一个需求，需要将之前通过点击按钮触发跳转到的另外一个页面，通过跟点击按钮的页面融合，通过tab的形式进行切换。【由于业务方面的需求，两个页面的逻辑代码部分存在一致性（经多年长期沿用下来的代码）】

实现方法：

引入antd的tab即可

render(){const {waitDealNum, activeKey} = this.statereturn (<ACard className='service-process-tab'><Tabs defaultActiveKey="1" animated={false}><TabPane tab="我的" key="1"><ServiceProcessCp {...this.props} /></TabPane><TabPane tab="你的" key="2"><ClaimedServiceCp {...this.props} type='1' /></TabPane></Tabs></ACard>)}

存在问题：

单纯将页面2作为一个组件引入页面1的话，可能在一些触发操作中，会存在问题，比如说打开一个弹窗，两个组件都存在的话，就会弹出两次

解决方法：

最快的解决方法是，在切换tab时，销毁掉隐藏的dom，如果说tab切换频繁，会存在重复渲染跟销毁元素，对性能方面有一定影响

最好的解决方法是，重构一下页面，对相互影响的方法做区分处理，抽离公共部分

1、antd提供的tabs的 destroyInactiveTabPane属性可以解决上面的问题

<Tabs defaultActiveKey="1" animated={false} destroyInactiveTabPane={true}>

2、给tabs绑定onchange事件，通过监听activeKey来控制dom展示

handleTabChange = (value) => {this.setState({activeKey: value})}render(){const {waitDealNum, activeKey} = this.statereturn (<ACard className='service-process-tab'><Tabs defaultActiveKey="1" animated={false} onChange={this.handleTabChange}><TabPane tab="我的" key="1">{activeKey == 1 ? <ServiceProcessCp {...this.props} /> : null}</TabPane><TabPane tab="你的" key="2">{activeKey == 2 ? <ClaimedServiceCp {...this.props} type='1' /> : null}</TabPane></Tabs></ACard>)}