ant design tabs页回显高亮

第一种尝试：然后给defaultActiveKey属性赋值，但是等跳转过去又是在第一项，不知为何，赋值就是不管用。

第二种尝试：然后给activeKey属性赋值，跳转过去确实是第三项，但是切换别的项失败。

第三种尝试：继续第二种尝试，查看文档，发现有onChange事件，每次更改，给activeKey赋值，问题解决。还有一个onTabClick事件，也可以运用。

代码如下

class Personal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tabPosition: 'left',
            activeKey: '',
        }
    };
 
    componentDidMount() {
        if (this.props.history.location.state === undefined) {
            this.setState({
                activeKey: '1'
            });
        }else{
            let state = this.props.history.location.state;
            this.setState({
                activeKey: state.id+''
            });
        }
    }
    
    callback = (key) => {
        this.setState({
            activeKey: key
        });
    }
    
    render() {
        const {activeKey} = this.state;
        return (
            <Tabs onChange={this.callback} style={{marginTop: '16px',paddingTop: '24px'}} activeKey={activeKey} tabPosition={this.state.tabPosition} size="large">
                <TabPane tab="基本信息" key="1">
                    <Basic/>
                </TabPane>
 
                <TabPane tab="我的钱包" key="2">
                    <Wallet/>
                </TabPane>
 
                <TabPane tab="我的订单" key="3">
                    <Order/>
                </TabPane>
 
                <TabPane tab="消息与通知" key="4">
                    <Notice/>
                </TabPane>
            </Tabs>
        );
    }
}
 
export default Personal;

原文链接：https://blog.csdn.net/weixin_41813970/article/details/95359769