React实现tab切换

源码如下

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom'



class P extends React.Component {
    render() {
        return (
            <div>PPPPPPPP</div>
        )
    }
}

class V extends React.Component {
    render() {
        return (
            <div>VVVVVVV</div>
        )
    }
}
class Tab extends React.Component {
    constructor() {
        super();
        this.state = {
            flag:true
        }
    }
    // 定义方法
    change(type) {
        this.setState({
            flag:type
        })
    }
    render() {
        var flag = this.state.flag;
        return (
           <div>
               <ul>
                   <li  className={flag?'selected':''} onClick={()=>this.change(true)}>A选项</li>
                   <li  className={!flag?'selected':''} onClick={()=>this.change(false)}>B选项</li>
               </ul>
          
            <div>
                {flag == true ? <P/>:<V/> }
            </div>
            </div>
        )
    }
}

ReactDOM.render(<Tab/>, document.getElementById('app'));