react做的简单的选项卡

### 首先安装react的脚手架

cnpm    install   create-react-app   -g    只需要在电脑下载安装一次即可 

###创建项目

create-react-app   项目名（xx）

###进入项目(xx)，运行项目

npm  start   或者下载cnpm  install  yarn   --save   输入yarn   start   也可以运行 

###创建两个文件夹 App和选项卡 

将App.css和App.js放入App文件夹中

在创建两个xxk.js和xxk.css放入选项卡文件夹中

###在xxk.js中写入代码 

 

import React, {Component} from 'react';//引入react模块
import "./xxk.css"//引入xxk.css样式
class Xxk extends Component {
    constructor(props) {
        super(props);
        this.state={//初始化状态
            tits:["精选","热点","娱乐","新闻"],
            cons:["内容111","内容222","内容333","内容444"],
            curr:0 //定义一个状态用来判断
        }
    }

    dj(n){
        this.setState({curr:n})//更新curr的状态为n（下标）
    }
    render() {
        return (
            <div className="box">
                <ul>
                    {
                        this.state.tits.map((v,i)=>{
                            return <li key={ i } onClick={this.dj.bind(this,i)}
                            className={this.state.curr==i?"active":""}>//是三目运算符判断：当curr等于当前的下标时，显示active样式，否则为空
                                {v}
                            </li>
                        })
                    }
                </ul>
                <ol>
                    {
                        this.state.cons.map((v,i)=>{
                            return <li key={ i } style={{display:this.state.curr==i?"block":"none"}}>//三目运算符：当它跟当前的下标相等的时候，显示，反之隐藏
                            {/*// return <li key={i} className={this.state.curr==i?"ac":""} >*/}//这种写法也可以 
                                {v}
                            </li>
                        })
                    }
                </ol>
            </div>
        );
    }
}

export default Xxk;//导出

 

###在xxk.css中写入样式 

 

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
.box>ul{
    height: 40px;
    width: 400px;
}
.box>ul>li{
    float: left;
    width: 100px;
    text-align: center;
    line-height: 40px;
}
.box>ul>li.active{
    background: greenyellow;
}
.box>ol{
    height: 350px;
    width: 400px;
    /*border: 1px solid red;*/
    padding: 10px;
}
.box>ol>li{
    line-height: 350px;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    text-shadow: 4px 4px 4px red,3px 3px 3px yellow,
    5px 5px 6px greenyellow, 6px 6px 7px paleturquoise;
}

.box>ol>li.ac{
    background: palegreen;
}

 

###在App.js中写入代码 

 

import React from 'react';//引入react模块
import Xxk from "../选项卡/xxk";//引入xxk.js文件
class App extends React.Component {
  constructor(props) {
    super(props);

  }

  render() {

    return (
        <div>
            <Xxk></Xxk>//xxk.js组件
        </div>
    );
  }
}



export default App;//导出

 

###最后一个简单的选项卡已经做完啦！ 欢迎评论，希望能有幸一起交流学习！！！