### 首先安装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;//导出

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

react做的简单的选项卡的更多相关文章

  1. react做的简单的购物车

    ###第一步 :首先电脑上已经安装react的脚手架 cnpm  install    create-react-app   -g ###第二步 :创建项目 creact-react-app   项目 ...

  2. 【Css】一个简单的选项卡

    这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...

  3. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  4. React Native超简单完整示例-tabs、页面导航、热更新、用户行为分析

    初学React Native,如果没有人指引,会发现好多东西无从下手,但当有人指引后,会发现其实很简单.这也是本人写这篇博客的主要原因,希望能帮到初学者. 本文不会介绍如何搭建开发环境,如果你还没有搭 ...

  5. JS入门学习,写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  6. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  7. react UI交互 简单实例

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  8. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  9. 如何做个简单安卓App流程

    有同学做毕业设计,问怎样做个简单安卓App流程,我是做服务端的,也算是经常接触app,想着做app应该很简单吧,不就做个页面,会跳转,有数据不就行了,我解释了半天,人家始终没听懂,算了,我第二天问了下 ...

随机推荐

  1. theme-sodareload sublime编辑器主题插件还不错,不是语法高亮

    theme-sodareload   sublime编辑器主题还不错,不是语法高亮

  2. c# 关于mongo bson转json的问题

    问题解决自:https://stackoverflow.com/questions/27132968/convert-mongodb-bsondocument-to-valid-json-in-c-s ...

  3. 利用 BackgroundService 固定时间间隔执行某动作

    继承 BackgroundService 类: 为什么会写这个东西呢?本人在写消息队列的时候思考过一个问题——比如,每5秒从队列里面取一条消息(一条消息里面又包含了1000条数据),要把这1000条数 ...

  4. 树套树【bzoj3262】陌上花开

    /* [bzoj3262]陌上花开 2014年6月19日1,2430 Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的 ...

  5. LibreOJ #507. 「LibreOJ NOI Round #1」接竹竿

    二次联通门 : LibreOJ #507. 「LibreOJ NOI Round #1」接竹竿 /* LibreOJ #507. 「LibreOJ NOI Round #1」接竹竿 dp 记录一下前驱 ...

  6. 爬虫(十四):scrapy下载中间件

    下载器中间件是介于Scrapy的request/response处理的钩子框架,是用于全局修改Scrapy request和response的一个轻量.底层的系统. 激活Downloader Midd ...

  7. codeforces425C

    http://codeforces.com/contest/425/problem/C 题意:两数列a[],b[],进行若干轮操作,每次操作花费e, 将a的一个前缀和b的一个前缀(两前缀的最后一个数字 ...

  8. Selenium操作Chrome模拟手机浏览器

    目录 使用指定设备 使用自定义设备 在使用Chrome浏览网页时,我们可以使用Chrome开发者工具模拟手机浏览器,在使用Selenium操作Chrome时同样也可以模拟手机浏览器.主要有以下两种用途 ...

  9. springBoot学习(一):初学Thymeleaf

    这一部分的代码是基于大神的代码,只是原本的代码是有错的,只自己记录一下自己更改之后的代码和自己的理解. 使用Spring Initzal创建项目,最后代码结构如下,我对Spring及其相关之事还是全然 ...

  10. Python基础之只接收关键字参数的函数

    当我们希望函数的某些参数强制使用关键字参数时,可以将强制关键字参数放到某个*后面就能得到这种效果.比如: def recv(maxsize, *, block): """ ...