React在刷新应用程序时引发错误

Question

我正在渲染一个页面，其中有3个用于不同组件的选项卡，但是如果刷新页面，则默认为第一个选项卡并停止工作。

我已经尝试为每个组件设置唯一键。

var React = require('react');
var createReactClass = require('create-react-class');
const { Tabs, Tab } = require('react-bootstrap');

var EEFC = require('./Components/EEFC');
var Scheduled = require('./Components/SchWithdrawal');
var Exclusion = require('./Components/Exclusion');

var BatchJSON = createReactClass({
    getInitialState: function() {
        return (
            {
                activeTab: 1,
            }
        )
    },
    renderComp: function(st) {
        switch(st) {
            case 1: console.log(st, 'EEFC');
                return <EEFC id='EEFC'/>;
            case 2: console.log('Excl');
                return <Exclusion id='Exclusion'/>;
            case 3: console.log('withdraw');
                return <Scheduled id='Scheduled'/>;
            default: console.log('default');
                return <EEFC id='EEFC'/>;
        }
    },    
    render: function() {
        return(
            <div>
                <div className='header-tab'>
                    <Tabs id='tab-header'
                    onSelect={(e) => {
                        console.log(e);
                        console.log(this.state.activeTab)
                        this.setState({activeTab: e})
                    }}
                    mountOnEnter={true}
                    unmountOnExit={true}>
                        <Tab eventKey={1} title='EEFC'>
                        </Tab>
                        <Tab eventKey={2} title='Exclusion'>
                        </Tab>
                        <Tab eventKey={3} title='Schedule'>
                        </Tab>
                    </Tabs>            
                </div>
                <div>
                    { this.renderComp(this.state.activeTab) }
                </div>
            </div>
        )
    }
});

module.exports = BatchJSON;

它可以启动应用程序，但是如果我刷新页面，它将引发以下错误并停止工作。

Uncaught Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side: