React的小案例：&&运算符、元素变量、三目运
2018-09-02 本文已影响5人
张培跃
今天的知识点不难，主要考验大家伙对代码的阅读能力啦！即将要接触的知识点有&&运算符、元素变量、三目运算符与React的条件渲染……
如下图，要完成一个简单的切换功能：
废话不多说，直接开始读代码吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="react/react.development.js"></script>
<script src="react/react-dom.development.js"></script>
<script src="react/babel.min.js"></script>
<style>
#tag input{
margin:5px;
padding:5px;
}
#tag input.active{
background:red;
}
#tag div{
width:500px;
height:200px;
border:1px solid green;
background:yellow;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
<script type="text/babel">
// 定义组件China
function China(){
return <div>中国</div>
}
// 定义组件Japan
function Japan(){
return <div>日本</div>
}
// 定义组件Korea
function Korea(){
return <div>韩国</div>
}
// 定义组件Go,该组件根据props.index来决定显示以上三个中的一个。
function Go(props){
//定义数组，用于存放最初定义的三个组件的名字
var arr=["China","Japan","Korea"];
// 元素变量：为了有条件的渲染组件，可以通过变量来存储元素。
// 如下 {arr[props.index]}
// if(props.index>=0 && props.index<arr.length){
// return (
// <div>
// {arr[props.index]}
// </div>
// )
// }
// 根据&&运算符的特性来实现条件渲染。
// 当props.index不满足条件时，即渲染相应组件
// 其实是一块语法糖，效果同上方注释代码效果相同
return (
<div>
{props.index>=0 && props.index<arr.length && arr[props.index]}
</div>
)
}
//通过class来定义组件Country
class Country extends React.Component{
constructor(props){
super(props);
//初始化状态
this.state={
index:props.index
};
}
// 定义方法用于改变state.index属性
change(i){
this.setState({
index:i
})
}
render(){
return (
<div id="tag">
{/*JXS 调用class 需要使用className,通过三元运算符得到结果。*/}
<input type="button" className={this.state.index==0?"active":""} value="中国" onClick={()=>{this.change(0)}}/>
<input type="button" className={this.state.index==1?"active":""} value="日本" onClick={()=>{this.change(1)}}/>
<input type="button" className={this.state.index==2?"active":""} value="韩国" onClick={()=>{this.change(2)}}/>
<Go index={this.state.index}/>
</div>
)
}
}
ReactDOM.render(
//指定默认选中项
<Country index="0"/>,
document.querySelector("#wrap")
);
</script>
</html>
就到这吧
