React中的tab标签切换
涉及到构造函数和状态管理
- 状态值不能直接更改，需要通过set方法！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<title>例子2</title>
<style>
.two{
margin-left: 5%;
}
.t{
color:red;
}
span{
margin: 10px;
}
</style>
</head>
<body>
<div id="root1"></div>
<br><br><br>
<div id="root2"></div>
<br><br><br>
<div id="root3"></div>
</body>
<script type="text/babel">
var s=<div>我是第二个例子</div>
ReactDOM.render(
s,
document.getElementById("root1")
);
//继承实例
window.οnlοad=()=>{
class TabList extends React.Component{
constructor(){
super(); //继承关键字
this.state={
flag:true
}
};
one(){
this.setState({
flag:true
})
};
two(){
this.setState({
flag:false
})
}
//渲染
render(){
var flag=this.state.flag;
return (
<div>
<span onClick={()=>this.one()} className={flag? "t":""}>第一个按钮</span>
<span onClick={()=>this.two()} className={flag? "":"t"}>第二个按钮</span>
<div> {flag ? <p>1111</p> : <p>2222</p>} </div>
</div>
)
}
};
ReactDOM.render(
<TabList />,
document.getElementById("root2")
);
ReactDOM.render(
<div>{new Date().toLocaleTimeString()}</div>,
document.getElementById("root3")
)
}
</script>
</html>