react实现的tab切换组件

react

这几天在学习react框架,组件化的思想真的很酷。下面总结一下一个简单react tab切换组件的实现过程。

项目源码:react-tab

组件核心代码

import React from "react"

import "../css/style.css"

class TabsControl extends React.Component{

constructor( ){

super( )

this.state = {

currentIndex : 0

}

}

check_title_index( index ){

return index === this.state.currentIndex ? "tab_title active" : "tab_title"

}

check_item_index( index ){

return index === this.state.currentIndex ? "tab_item show" : "tab_item"

}

render( ){

let _this = this

return(

<div>

{ /* 动态生成Tab导航 */ }

<div className="tab_title_wrap">

{

React.Children.map( this.props.children , ( element,index ) => {

return(

<div onClick={ ( ) => { this.setState({ currentIndex : index }) } } className={ this.check_title_index( index ) }>{ element.props.name }</div>

)

})

}

</div>

{ /* Tab内容区域 */ }

<div className="tab_item_wrap">

{

React.Children.map(this.props.children,( element,index )=>{

return(

<div className={ this.check_item_index( index ) }>{ element }</div>

)

})

}

</div>

</div>

)

}

}

export default TabsControl

组件使用

import React from "react"

import ReactDOM from "react-dom"

import TabsControl from "./react_tab.jsx"

class TabComponent extends React.Component{

render( ){

return(

<div className="container">

<TabsControl>

<div name = "first">

第一帧

</div>

<div name = "second">

第二帧

</div>

<div name = "third">

第三帧

</div>

</TabsControl>

</div>

)

}

}

ReactDOM.render(<TabComponent/>,document.getElementById("app"))

实现思路:

在使用<TabsControl/>组件时会传入任意数量的div,即为切换组件的主要内容帧,在组件内部通过 this.props.children 获取到主要内容帧,并且动态生成相应数量的tab_title,再对标题区和内容区设置合适的className,以控制标题区的颜色切换和内容区域的显示和隐藏,组件通过 state 存放 index 来记忆被点击的区域,并且每一个标题区域都有绑定一个 click 处理方法,每一次点击都会更新 state 的 index 值,组件会自动调用 this.render 方法重新渲染视图,上面说到的 className 的设置规则也是借由index值来实现的 => 当标题区域或者内容区域其对应的索引值与 state 中的 index 相同的时候,给它们添加具有特殊的即动态标示的className,使得当前被点击标题高亮以及对应的内容帧显现。

以上是 react实现的tab切换组件 的全部内容, 来源链接: utcz.com/z/381416.html

回到顶部