react实现tab切换

鞠婧祎yamy

已于 2023-04-13 11:00:00 修改

阅读量940

点赞数 1

分类专栏： #React 文章标签： react.js javascript 前端

于 2023-03-31 20:27:43 首次发布

本文链接：https://blog.csdn.net/Huangpiao04/article/details/129888054

版权

#React 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/babel.js"></script>
    <style>
        h1{
            text-align: center;
        }
        ul{
            display: flex;
            justify-content: space-around;  
        }
        .active{
            color: red;
            text-decoration: underline gray;
        }
        ul li{
            list-style: none;
        }

        p{
            display: none;
        }

        .display{
            display: block;
            padding-left: 40px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const root =ReactDOM.createRoot(document.querySelector("#root"));
            class App extends React.Component{
                constructor(){
                    super();
                    this.state={
                        title:'事件绑定练习',
                        message:[
                            "js课程信息","vue课程信息","react课程信息"
                        ],
                        lesson:[
                            "js课程!!!!函数、DOM\BOM","vue课程，指令、脚手架、组件等等","react课程、组件、脚手架等等"
                        ],
                        curentIndex:0
                    }
                }
                getItem(index){
                    this.setState({
                        curentIndex:index
                    })
                }
                
                render(){
                    const {title,curentIndex,message,lesson} =this.state;
                    return(
                    <div>
                        <h1>{title}</h1>
                        <ul>
                            {message.map((item,index)=><li className={curentIndex==index?'active':''}
                            onClick={()=>{this.getItem(index)}}>{item}</li>
                        )}
                        </ul>
                        <ul>
                            {lesson.map((item,index)=><p className={curentIndex==index?'display':''}>{item}</p>
                        )}
                        </ul>
                    </div>
                )
                }
            }
            root.render(<App/>)
    </script>
</body>

</html>

2.利用脚手架+父传子

1.App.jsx

import React, { Component } from 'react'
import Tabcontroll from './Tabcontroll'
export default class App extends Component {
    state={
        titles:['java','js','vue','react']
    }
render() {
    return (
        <div>
            <Tabcontroll titles={this.state.titles}/>
        </div>
    )
    }
}

2.Tabcontroll.jsx

import React, { Component } from 'react'
import './app.css'
export default class Tabcontroll extends Component {
    constructor(props){
        super(props);
        this.state={
            curentIndex:0
        }
    }
    getItem(index){
        this.setState({
            curentIndex:index
        })
    }
render() {
    const{curentIndex}=this.state
    return (
        <div>
            <ul  className='parent'>
            {
                this.props.titles.map((item,index)=><li key={item} className={curentIndex===index?'active':''}
                onClick={()=>{this.getItem(index)}}>{item}</li>)}
            </ul>
            {
                this.props.titles.map((item,index)=><p key={item} className={curentIndex===index?'display':''}>{item}</p>)
            }
        </div>
    )
    }
}

3.app.css

.parent{
    display: flex;
    height: 50px;
    width: 100%;
    background-color: gainsboro;
}
li{
    flex: 1;
    list-style: none;
    display: block;
    line-height: 50px;    
}
p{
    display: none;
}
.active{
    color: red;
    text-decoration: underline red;
}
.display{
    display: block;
}

3.脚手架+父子通信

parent.jsx

import React, { Component } from 'react'
import Child from './Child'

export class Parent extends Component {
    state = {
        titles:['java','js','vue','react'],
        i:0
    }
    // 父传子 获取索引
    tabClick(index){
        this.setState({
            i:index
        })
    }
render() {
    const{titles,i} = this.state;
    return (
        <div>
            {/* 父传子 */}
            <Child titles={this.state.titles} tabClick={this.tabClick.bind(this)}/>
            <h1>{titles[i]}</h1>
        </div>
    )
    }
}

export default Parent

child.jsx

import React, { Component } from 'react'
import './style.css'
export class Child extends Component {
    state={
        tabIndex:0
    }
    getIndex=(index)=>{
        this.setState(
            {
                tabIndex:index
            }
        )
        // 子传父
        this.props.tabClick(index)
    }
render() {
    const {tabIndex} = this.state
    return (
        <div className='content'>
            {this.props.titles.map((item,index)=>{
                return(
                    <div key={item} className={`item ${tabIndex===index?'active':''}`} 
                        onClick={()=>this.getIndex(index)}>{item}</div>
                )
            })}
        </div>
    )
    }
}

export default Child

style.css

.content{
    display: flex;
    height: 40px;
    background-color: gainsboro;
    align-items: center;
}
.content .item{
    flex:1
}
.active{
    color: red;
}