Maison > Article > interface Web > React.js implémente une description dynamique du changement de couleur de police
Cet article décrit comment React.js implémente le changement dynamique de couleur de police. Les étudiants qui ne sont pas familiers avec React.js implémentant le changement dynamique de couleur de police peuvent jeter un œil à cet article avec nous. Arrêtons de dire des bêtises. comment React.js implémente le changement dynamique de couleur de police !
<!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>
Cette méthode ne peut changer de style qu'en un seul clic.
<!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>
Il n'y a pas beaucoup de différence entre les deux. L'essentiel est que la deuxième méthode utilise l'opérateur opération ternaire pour réaliser le clic. Fonction de commutation Boucle.
Recommandations associées :
react.js donne la référence du logo et obtient le contenu
Utilisez un exemple très simple pour comprendre l'idée des composants d'ordre supérieur de React.js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!