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')

);

總結

以上是生活随笔為你收集整理的react滑动切换tab动画效果_使用React实现的水平标签（Tab）栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。