この記事では、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>
2 つの間に大きな違いはありません。主なことは、2 番目の方法では、三項演算 演算子を使用してクリック ループ 切り替え機能を実現するということです。
関連する推奨事項:
非常に簡単な例を使用して、react.js の高レベル コンポーネントの概念を理解する
以上がReact.js は動的フォントカラー切り替え記述を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。