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

//三目运算符：当它跟当前的下标相等的时候，显示，反之隐藏

{/*// return

*/}//这种写法也可以

                                {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.js组件

        </div>

    );

  }

}

export default App;//导出

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