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;//导出
###最后一个简单的选项卡已经做完啦！ 欢迎评论，希望能有幸一起交流学习！！！
