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;//導出

 

###最后一個簡單的選項卡已經做完啦！ 歡迎評論，希望能有幸一起交流學習！！！