05、react之 條件判斷的四種寫法
阿新 • • 發佈：2019-02-08
條件判斷的四種寫法
1、三元表示式?:
1、三元表示式?:
2、使用變數，通過函式使用條件判斷語句，返回一個字串
3、直接在{}中呼叫函式4、使用比較運算子&& || ！
說明：通過這種方式儘管onOff的值在點選的時候有被改變，但是樣式出任然不會有改變，樣式出不會被重新渲染，必須運用各個元件的state狀態，當這個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>