React基础（tab切换）

使用react实现tab切换

1.在tabs.js中导入react

import { Component } from "react";
import './tabs.css'
class Tab extends Component {
    // state
    // 定义在state中的数据认识响应式数据
    // state中的数据不能直接修改(会影响子组件中的内容选择性渲染)
    state = {
        tabs: [
            { id: 1, title: '张杰', content: '老莫想吃鱼' },
            { id: 2, title: '老薛', content: '演员大花轿' },
            { id: 3, title: '孟子怡', content: '你还是假唱吧' },
            { id: 4, title: '老秦', content: '娥姐还在么' }
        ],
        i: 0
    }
    render() {
        let {tabs,i} = this.state   //解构、在jsx中以简单的方式使用变量
        return (
          <div>
              {tabs.map((ele,index)=>(
                <button
                key={ele.id}
                //三元运算符
                className = {i == index?"active":""}    
                // setState方法的参数
                // 第一个参数：对象（最常用）、函数  （得到修改之前的旧值）
                // 第二个参数：回调函数  （可以得到修改以后最新的值）

                onClick={()=>{
                    this.setState({
                        i:index
                    })
                }}
                >{ele.title}</button>
              ))}
              <div className="con">
                  {tabs[i].content}
              </div>
          </div>
        )
    }
}

export default Tab

2.写入tabs.css样式

button{
    margin: 0px 15px;
}
.active{
    background: pink;
}
.con{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}

3.最终完成效果