react給當前元素添加一個類以及key的作用

給當前元素添加一個類是通過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>
    );
  }