问选择dynamically a component作为缺省排序

EN

class App extends React.Component {
    constructor(){
        this.state={active_group: 0};
        this.changeGroup = this.changeGroup.bind(this);
    }
    changeGroup(group_id){
        this.setState({active_group: group_id});
    }
    render() {
        //this is a rough implementation
        var group = '';
        if (this.state.active_group == 1){
            group = <Group1/>;
        }
        else if (this.state.active_group == 2){
            group = <Group2/>;
        }
        else if (this.state.active_group == 3){
            group = <Group3/>;
        }
        return (
            <div>
                <ul> 
                    Here is the nav 
                    <li onClick={this.changeGroup.bind(this,1)}> Group 1 </li>
                    <li onClick={this.changeGroup.bind(this,2)}> Group 2 </li>
                    <li onClick={this.changeGroup.bind(this,3)}> Group 3 </li>
                </ul>
                {group}
            </div>
        );
    }
};

 class Group1 extends React.Component {
    render(){
        return(<div> Group 1 now showing </div>)
    }
};

class Group2 extends React.Component {
    render(){
        return(<div> Group 2 now showing </div>)
    }
};

class Group3 extends React.Component {
    render(){
        return(<div> Group 3 now showing </div>)
    }
};



React.render(<App />, document.getElementById('container'));