index.js 

import React from 'react';
import ReactDOM from 'react-dom';import './App.css'class Tab extends React.Component {constructor(props) {super(props)//状态 时间this.state = {c2: "content",c1: "content active"}this.clickEvent = this.clickEvent.bind(this)}clickEvent(e) {console.log('clickEvent')console.log(e)console.log(e.targrt.dataset.index)let index = e.targrt.dataset.indexif (index == '1') {this.setState({c1: "content active",c2: "content"})} else {this.setState({c1: "content ",c2: "content active"})}}render() {return ( <div ><button data - index = "1"onClick = { this.clickEvent } > 内容1 < /button>  <button data - index = "2"onClick = { this.clickEvent } > 内容2 < /button> <div className = { this.state.c1 } ><h1 > 内容1 < /h1> < /div > <div className = { this.state.c2 } ><h1 > 内容2 < /h1> < /div > </div >)}/* 生命周期函数 */}//console.log("这是渲染函数")
ReactDOM.render( < Tab / > , document.querySelector("#root"))

App.css

.content {display: none
}.content .active {display: block
}