這篇文章講述了react.js是如何實現動態字體顏色切換的,大家對於react.js實現動態字體顏色切換不太熟悉的同學可以和我們一起來看看本篇文章,廢話少說,我們直接來看看react.js是如何實現動態字體顏色切換的吧!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="https://static.runoob.com/assets/react/browser.min.js"></script> </head> <body> <p id="example"></p> <script type="text/babel"> var LikeButton = React.createClass({ getInitialState: function() { return {liked: "yellow"}; }, handleClick: function(event) { this.setState({liked:"blue"}); }, render: function() { var text = this.state.liked; var style = { color:text }{/*css样式既可以写在组件内也可以写在组件外*/} return ( <p onClick={this.handleClick} style={style}>{/*这里不能直接用如style={color:"yellow"}这种属性赋予方式*/} 点我,点我,点我我就变身。 </p> ); } }); React.render( <LikeButton />, document.getElementById('example') ); </script> </body> </html>
這種方式只能實現點擊一次切換樣式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="https://static.runoob.com/assets/react/browser.min.js"></script> </head> <body> <p id="example"></p> <script type="text/babel"> var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked:!this.state.liked}); }, render: function() { var text = this.state.liked?"yellow":"blue"; var style = { color:text } return ( <p onClick={this.handleClick} style={style}> 你我。点我切换状态。 </p> ); } }); React.render( <LikeButton />, document.getElementById('example') ); </script> </body> </html>
兩者之間沒什麼多大的區別,主要是第二種運用了三元運算符,實現了點擊循環切換的功能。
相關推薦:
以上是react.js實作動態字體顏色切換講述的詳細內容。更多資訊請關注PHP中文網其他相關文章!