05、react之 条件判断的四种写法
条件判断的四种写法
1、三元表达式 ? :
1、三元表达式 ? :
2、使用变量，通过函数使用条件判断语句，返回一个字符串
3、直接在{}中调用函数4、使用比较运算符 && || ！
说明：通过这种方式尽管onOff的值在点击的时候有被改变，但是样式出任然不会有改变，样式出不会被重新渲染，必须运用各个组件的state状态，当这个state状态改变的时候，组件才会去重新渲染
<!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">
<title>条件判断的四种写法</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
color: #fff;
}
.box2 {
width: 150px;
height: 150px;
background: #000;
color: #fff;
}
</style>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.js"></script>
</head>
<body>
<script type="text/babel">
var onOff = true;
var Demo = React.createClass({
// 自定义一个点击事件
handleClick:function() {
onOff = !onOff;
console.log(onOff);
},
render:function(){
return <div className={onOff?"box2":"box1"} onClick={this.handleClick}>我是一个盒子</div>
}
})
ReactDOM.render(<Demo/>,document.body)
</script>
</body>
</html>
<!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">
<title>条件判断的四种写法</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
color: #fff;
}
.box2 {
width: 150px;
height: 150px;
background: #000;
color: #fff;
}
</style>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.js"></script>
</head>
<body>
<script type="text/babel">
var Demo = React.createClass({
// 设置初始的状态
getInitialState:function(){
return {
onOff: true
}
},
// 自定义一个点击事件
handleClick:function() {
this.setState({
onOff:!this.state.onOff
})
},
render:function(){
return <div className={this.state.onOff?"box2":"box1"} onClick={this.handleClick}>我是一个盒子</div>
}
})
ReactDOM.render(<Demo/>,document.body)
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
