05、react之条件判断的四种写法

来源：互联网发布：mmd制作软件最新版编辑：程序博客网时间：2024/06/08 03:24

条件判断的四种写法
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>

使用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 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>

阅读全文

0 0

05、react之 条件判断的四种写法

05、react之条件判断的四种写法