react滑动切换tab动画效果_使用React实现的水平标签（Tab）栏

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var data = [

{name: 'Red', value: 'red'},

{name: 'Blue', value: 'blue'},

{name: 'Yellow', value: 'yellow'},

{name: 'Green', value: 'green'},

{name: 'White', value: 'White'}

];

var TabSelector = React.createClass({

getInitialState: function() {

return {selected: this.props.selected};

},

handleOnClick: function (evt) {

this.setState({'selected': evt.target.getAttribute('data-value')})

},

render: function() {

var tabs = this.props.data.map(function (item) {

var selected = item.value == this.state.selected ? 'selected' : '';

return

className={selected}

onClick={this.handleOnClick}

>{item.name}

;

}, this);

return

{this.props.label}

{tabs}

;

}

});

React.render(

TabSelector({label: 'Color', data: data, selected: null}),

document.getElementById('container')

);