自己想了一个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,见谅
自己也是新手,也在不断地踩坑,希望大家多多交流,共同进步
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。