给当前元素添加一个类是通过className来处理的;

引入css;直接from XXXX
import React, { Component } from "react";
// 以内css,直接form
import "./base.css"
export class TestHanderClick extends Component {
constructor(props) {
super(props);
this.state={
num:1,
}
} hander(index){
// 传递参数
this.setState({
num:index
})
} render() {
return (
<div>
<div onClick={this.hander.bind(this,1)} className={ this.state.num==1 ? 'active' : ''}>11111111</div>
<div onClick={this.hander.bind(this,2)} className={ this.state.num==2 ? 'active' : ''}>222222</div>
<div onClick={this.hander.bind(this,3)} className={ this.state.num==3 ? 'active' : ''}>333333</div>
</div>
);
}
} export default TestHanderClick;

优化一下

import React, { Component } from "react";
// 以内css,直接form
import "./base.css"
export class TestHanderClick extends Component {
constructor(props) {
super(props);
this.state={
num:1,
listArr:[
{cont:"111",index:1},
{cont:"222",index:2},
{cont:"333",index:3},
{cont:"4444",index:4}, ]
}
} hander(index){
// 传递参数
this.setState({
num:index
})
} render() {
return (
<div>
{this.state.listArr.map(item=>{
return <div key={item.index} onClick={this.hander.bind(this,item.index)}
className={ this.state.num===item.index ? 'active' : ''}>{item.cont}</div>
})}
</div>
);
}
} export default TestHanderClick;

如果数据中没有提供索引值,你应该利用map函数中第二个参数i,它代表索引值

强烈不推荐,使用map自带的i;

最好使用数据源中的标识,

因为数据源中的标识,

它发现数据有些不需要跟新的时候,

就不会改动不变化的,将需要改动的值插入进来。

如果你使用的是map中的index,那么不管数据有没有变化,它都是将所有的数据销毁后,然后重新插入新的值;

这样的话,react的渲染速度就大不一样了;

这样key才能够提高跟新效率,

如果你一直使用的是map中的index来作为key,那你写了当白写哈(手动滑稽)

 render() {
return (
<div>
{this.state.listArr.map((item,index)=>{
return <div key={index} onClick={this.hander.bind(this,index)}
className={ this.state.num===index ? 'active' : ''}>
{item.cont}</div>
})}
</div>
);
}

react给当前元素添加一个类以及key的作用的更多相关文章

  1. 向第一个 p 元素添加一个类

    This is a heading This is a paragraph. This is another paragraph. 向第一个 p 元素添加一个类 111 <html> &l ...

  2. 用JQuery动态为选中元素添加/删除类

    在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...

  3. React map生成元素添加点击事件绑定this

    问题 使用.map(function(Item)生成元素添加onClick事件:onClick={this.provinceChange.bind(this, "99")}时,前台 ...

  4. js动态给当前点击元素添加css类

    1.页面:

  5. react+redux+generation-modation脚手架添加一个todolist

    当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...

  6. JQuery_给元素添加或删除类等以及CSS()方法

    一.addClass() - 向被选元素添加一个或多个类 <script src="jquery-1.11.1.min.js"></script> < ...

  7. jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

  8. add(expr|ele|html|obj[,con]) 把与表达式匹配的元素添加到jQuery对象中。

    add(expr|ele|html|obj[,con]) 概述 把与表达式匹配的元素添加到jQuery对象中.这个函数可以用于连接分别与两个表达式匹配的元素结果集. jQuery 1.4 中, .ad ...

  9. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

  10. JavaScript 操作选中当前的li元素并给他添加select类

    JavaScript 操作选中当前的li元素并给他添加select类.之前都是使用jquery写的,今天使用JavaScript写一个. <!DOCTYPE html> <html ...

随机推荐

  1. CSP2023总结

    CSP2023总结 入门组 比赛开始时,顺序开题. 看完 \(T1\) 后没有立即想出正确解法,有点慌乱,看完 \(T2,T3\) 并思考了一会后过去了大概 \(20\) 分钟,想到了解法便看 \(T ...

  2. 关于elementUI的table报错RangeErr Maximum call stack size exceeded

    项目中需要做一个功能,在表格中如果存在二级列表,点击箭头之后请求后台接口,展开显示二级列表的内容.点击箭头拿到了数据,但是后台会报错如下图,且数据展示不出来 上网查了下,意思是堆栈溢出,这个提示让我十 ...

  3. 抓包工具之Charles(windows)

    激活码:  https://www.zzzmode.com/mytools/charles/ 官方地址:https://www.charlesproxy.com/ PC端如何配置才能抓取到https请 ...

  4. python常用模块汇总

    os模块 os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有文件 os.chdir() 改变当前工作目 ...

  5. Centos7 安装python3与python2.7 共存

    前言 在centos7服务器上,linux系统默认安装有python2.7,这是系统服务等会依赖到的,所以系统的python2.7是不可以卸载的,避免系统出现问题.那么问题就来了,我们现在使用的pyt ...

  6. Qt No Target Architecture

    在QT中引入processthreadsapi.h,如果出现 "No Target Architecture",需要在processthreadsapi.h前引入windows.h ...

  7. Vue3 面试题 (2023-09-26更新)

    Vue3 对比 Vue2 做了那些改进? 1. 响应式系统 vue2 中使用的 Object.defineProperty 实现的响应式,劫持整个对象,递归遍历所有属性,给每个属性添加 getter ...

  8. 【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小

    效果预览 HTML源码 点击查看HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  9. 利用shell中awk和xargs以及sed将多行多列文本中某一列合并成一行

    一.问题描述最近需要利用Shell将多行多列文本中某一列,通过指定的分隔符合并成一行.假设需要处理的文本如下: 我们主要处理的是,将用户名提取处理,合并成一行,并通过逗号进行分隔.最终的格式如下: & ...

  10. PostgreSQL 的特点

    title: PostgreSQL 的特点 date: 2024/12/24 updated: 2024/12/24 author: cmdragon excerpt: PostgreSQL 是当今最 ...