使用react完成标签切换

最新推荐文章于 2024-06-14 10:50:31 发布

a84934532

最新推荐文章于 2024-06-14 10:50:31 发布

阅读量4.2k

点赞数 1

分类专栏： react轮子文章标签： tab切换

本文链接：https://blog.csdn.net/a84934532/article/details/70161880

版权

react轮子专栏收录该内容

1 篇文章 0 订阅

订阅专栏

特点：直接把多个div映射为tab+div的形式

效果图
代码最终效果
除了点击标签切换显示之外，还有个地方需要特别注意，切换后，title下面的边框要去掉，这样才与内容是一体的，很多案例都只是实现tab切换而已，参考浏览器的标签切换，页面和标题之间的border是要去掉的，这个地方的实现思路：content的边框大小是1px，那么让整个nav下沉1px，同时把当前的title的下边框设置为内容的背景色，这样子就挡住了内容的上边框，title和内容变成一个整体了。
tab切换，用react来实现是很简单的，点击title时，把state设置为对应的索引，如果内容的索引等于state，那么显示，否则不显示。

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

css

.tab-container{
    position: relative;
}
.nav-tab{
    display:table;
    width:800px;
    box-sizing: border-box;
    position: relative;
    top: 1px;
    border:1px solid #222;
    border-bottom:none;
}
.tab-title{
    display:table-cell;
    border-right:1px solid #222;
    height:2em;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}
.tab-title:last-child{
    border-right:none;
}
.tab-content{
    display:none;
    width:800px;
    height:600px;
    border: 1px solid #222;
    box-sizing: border-box;
    background-color:#ddd;
}

.tab-title-shown{
    border-bottom: 1px solid #ddd;
}

.shown{
    display:block;
}

babel

import React from 'react';
import ReactDOM from 'react-dom';
require('../style/tab.scss');

class App extends React.Component{
    render(){
        return(
            <TabController>
                <section name='red'>我是红色</section>
                <section name='blue'>我是蓝色</section>
                <section name='yellow'>我是黄色</section>
                <section name='green'>我是绿色</section>
            </TabController>
         )
    }
}

class TabController extends React.Component{
    constructor(props){
        super(props);
        this.state={
            currentIndex:0
        }
    }
    render(){
        return(
            <div className='tab-container'>
                <nav className='nav-tab'>
                    {React.Children.map(this.props.children,(element,index)=>(<div onClick={this.changeTab.bind(this,index)} className={this.addTitleClass(index)}>{element.props.name}</div>))}
                </nav>
                <div>
                    {React.Children.map(this.props.children,(element,index)=>(<div className={this.addContentClass(index)}>{element}</div>))}
                </div>
            </div>
         )
    }
    addTitleClass(index){
        return index==this.state.currentIndex?'tab-title tab-title-shown':'tab-title';
    }
    addContentClass(index){
        return index==this.state.currentIndex?'tab-content shown':'tab-content';
    }
    changeTab(index){
        this.setState({
            currentIndex: index
        })
    }
}
ReactDOM.render(<App />,document.getElementById('container'));

参考资料：
https://segmentfault.com/a/1190000004200481

a84934532

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用react完成标签切换

欢迎使用Markdown编辑器写博客本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键特点：直接把多个div映射为tab+div的形式效果图除了点击标签切换显示之
复制链接

扫一扫

专栏目录