下面来编写一个tab选项卡切换效果，效果如下图所示：

下面我放上该组件的代码：

import React, { Component } from 'react';
import { Link } from 'react-router';
import '../scss/base.scss';
import '../scss/tab.scss';class TabController extends Component {constructor(props){super(props);this.state = {current: 0};}itemNav = (index) => {return index === this.state.current ? 'item-title active' : 'item-title';}itemCon = (index) => {return index === this.state.current ? 'con active' : 'con';}render(){return (<div><ul className="itemContainer clearfix">{React.Children.map(this.props.children,(element,index) => {return (<li onClick={ () => { this.setState({ current: index }) } } className={ this.itemNav(index) }>{ element.props.name }</li>)})}</ul><div className="itemCon">{React.Children.map(this.props.children, (element,index) => {return (<div onClick={ () => { this.setState({ current: index }) } } className={ this.itemCon(index) }>{ element }</div>)})}</div></div>);}
}export default class TabComponent extends Component {constructor(props){super(props);this.state = {};}render(){return (<TabController><div name="one">第一部分</div><div name="two">第二部分</div><div name="three">第三部分</div></TabController>);}
}

参考： http://www.cnblogs.com/tianheila/p/5170330.html