如何在react中实现一个table切换?

废话不说,直接贴代码,供新手参考

export default class TabComponent extends Component {
constructor(props){
super(props);
this.state = {

    };
}
render(){
    return (
        <TabController>
            <div name="one">
                第一部分
            </div>
            <div name="two">
                第二部分
            </div>
            <div name="three">
                第三部分
            </div>
        </TabController>
    );
}

}

上面是一个组件

constructor(props) {
super(props);
this.state = {
coutype: 0
}
}
itemNav = (index) => {
return index === this.state.coutype ? ‘active‘ : ‘‘;
}

    { this.state.couponBar.map((element,index) => { return (

  • { this.setState({ coutype: index }) } } className={ this.itemNav(index) } key={index}>{ element }
  • ) }) }

原文地址:https://www.cnblogs.com/panax/p/9240090.html

时间: 2024-08-17 19:03:09

如何在react中实现一个table切换?的相关文章

CAD技巧,如何在CAD中添加一个多行文本?

CAD技巧,如何在CAD中添加一个多行文本?在编辑CAD图纸的过程能够为了更加方便快捷建筑设计师们都会借助CAD编辑器来绘制图形,但是一张CAD图纸中的内容太多,在有的地方需要给CAD图纸进行一些标注,以便更好的查看,但是如何在CAD中添加一个多行文本?小伙伴们知道要怎么来操作吗?下面小编就利用迅捷CAD编辑器标准版来教教大家如何在CAD中添加一个多行文本?想要了解的朋友就一起来看看吧! 使用第一步:在电脑桌面中没有下载安装迅捷CAD编辑器的小伙伴们,在电脑中任意的打开一个浏览器,在浏览器的搜索

[译] 如何在React中写出更优秀的代码

目录 我们先来看 Linting 利用组件模块性.复用性和组合性 propTypes 和 defaultProps 知道何时创建新组件 组件 vs 纯组件 vs 无状态函数组件 无状态函数组件 纯组件 使用 React 开发工具 使用内联条件语句 尽可能使用代码片段库 React 本质 - 学习 React 是如何工作的 快速回顾 在React中写出更好代码的9条建议:学习关于 Linting, propTypes, PureComponent 等. Rajat S · 2018 年 4 月 1

如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置

如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置 <div style="position:relative;"> <img src="" width="500" height="500" /> <div style="position:absolute; left:80px; top:50px; border:#000 solid 1px;"><i

如何在JAVA中实现一个固定最大size的hashMap

如何在JAVA中实现一个固定最大size的hashMap 利用LinkedHashMap的removeEldestEntry方法,重载此方法使得这个map可以增长到最大size,之后每插入一条新的记录就会删除一条最老的记录. import java.util.LinkedHashMap; import java.util.Map; public class MaxSizeHashMap<K, V> extends LinkedHashMap<K, V> { private fina

CAD技巧-如何在CAD中绘制一个圆环?

CAD技巧,如何在CAD中绘制一个圆环?在日常的工作中,在编辑CAD图纸的时候,我们需要借助CAD编辑器中的许多图形来编辑一张完整的CAD图纸文件,以此来设计出我们满意的图纸,我们会使用到许多的图形比如说多边形.直线.正方,长方形等一些图形,但是我们如何在CAD中绘制一个圆环了?具体要怎么来操作?下面我们就来一起看看吧! 步骤一:首先还是需要打开电脑,然后在电脑桌面上任意的打开一个浏览器,在浏览器的搜索框中搜索迅捷CAD编辑器,鼠标点击进入官网,点击下载安装最新版本的CAD编辑器,下载完成之后,

如何在Chrome中方便快捷地切换分辨率(Chrome浏览器分辨率测试)

如何在Chrome中方便快捷地切换分辨率?使用Chrome插件Resolution Test!!! 1.下载Chrome插件Resolution Test.crx 2.浏览器--更多工具--扩展程序页面--开发者模式 3.将Resolution Test.crx用鼠标拖放到扩展程序页面 4.Chrome会弹出安装插件的提示.点击继续即可完成!在浏览器的网址栏后会显示该插件图标! 5.选择(是点击不是勾选!)目标分辨率,就可以将当前Chrome的窗口大小设置为目标分辨率大小. 6.可以选择多个分辨

如何在linux中执行一个脚本

---恢复内容开始--- 如何在LINUX中在系统启动时自动执行一个执行脚本 如果是开机马上执行的脚本,可以将脚本写到rc.local中: 如果是用户登录后自动执行脚本,可以将脚本写到相应的用户目录下"-/.bash_profile",若脚本"-/.bash_profile"不存在,可以直接拷贝"/etc/profile"命名为"-/.bash_profile": 如果是要任一用户登录后自动执行脚本,可以将脚本写到"

如何在solr中添加一个core

在上一篇博文中已经介绍了如何在tomcat中部署solr,部署完之后solr默认是有一个core的,也就是collection1,如下图: 如果想自定义一个core,该如何做呢? 本文将承接上一篇博文(http://simplelife.blog.51cto.com/9954761/1864071)继续展开! 1.在solrhome文件夹下复制一份collection1,并改名为simple,与collection1放在同一个文件夹中 2.进入simple文件夹中修改core.propertie

关于如何在ElementUI中实现统计Table筛选结果数量

在开发单位自己的系统时,领导提了这个需求,在看了ElementUI发现并没有实现这个功能. 遂向官方求解,得回复:自己在filter-method 中实现.于是便有了思路. 这里本人使用了一个比较暴力的方法,仅供参考: 1.给所有column的filter-method事件绑定一个对应方法: filterMethodsXXX(value, row){ if(row.brandName === value) { if(this.filterArray.filterXXXSet.indexOf(ro