React实现标签页切换

自己想了一个React切换标签的方法

本文不采用ES6写,用ES5写方便初学者学习
实现原理很简单,根据state的变化实现改变class
那么我们开始吧...

主要的结构关系

<TabControl>//父组件
    <Spannav />//子组件,标签页的标题
    <Contentnav />//子组件,对应的内容
</TabControl>

父组件

var React = require('react');
var ReactDOM = require('react-dom');


var TabControl = React.createClass({
    getInitialState: function(){
        return {
            currentIndex:0,//默认当前的索引值
            tabnav:[{title:'标题一',content:'内容一'},{title:'标题二',content:'内容二'},{title:'标题三',content:'内容三'}
            ]//数据
        }
    },handleClick:function(index){
        this.setState({
            currentIndex:index //由map循环传递的index
        });
    },render:function(){ 
        //循环出3个标签
        //注意map会改变this指向,用bind修正this指向
        var navmap = this.state.tabnav.map(function(arr,index){
            //判断index是否和this.state.currentIndex相等,相等就加上active的class
            var cn = index === this.state.currentIndex ? 'active' : '';
            //this.handleClick.bind(this,index)这里用bind主要是用来传递index的值,这样我们就可动态给currentIndex赋值并对应索引值
                return ( <Spannav active={cn} handleClick={this.handleClick.bind(this,index)} key={index} titles={arr.title} />)
            }.bind(this)) ;
        //循环出3个内容,原理同上
        var conmap = this.state.tabnav.map(function(arr,index){
            var cn = index === this.state.currentIndex ? 'active' : '';
            return ( <Contentnav active={cn} key={index} con={arr.content} />)
        }.bind(this));

        return (
            <div>
                {//输出}
                {navmap}
                {conmap}
            </div>
        )
    }
});

子组件

var Spannav = React.createClass({
    render:function(){
        return (
            {//子组件接收父组件传来的值要用this.props.xxx}
            <span className={this.props.active} onClick={this.props.handleClick}>{this.props.titles}</span>
        )
    }
});

var Contentnav = React.createClass({
    render: function() {
        return (
            <div className={this.props.active}>{this.props.con}</div>
        )
    }

});

渲染

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

贴张实际运行的截图吧(不好搞在线预览- -!)

比较low，见谅

自己也是新手,也在不断地踩坑,希望大家多多交流,共同进步

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!