ホームページ > 記事 > ウェブフロントエンド > React.js は動的フォントカラー切り替え記述を実装します
React.js は動的フォントカラー切り替え記述を実装します
- 韦小宝オリジナル
- 2018-03-14 12:40:304361ブラウズ
この記事では、react.js が動的フォント カラー切り替えを実装する方法について説明します。react.js による動的フォント カラー切り替えの実装に慣れていない学生は、この記事を一緒に見てみましょう。 React.js が動的フォントカラー切り替えを実装する方法!
フォントの色を動的に切り替える方法は 2 つあります。
最初の方法
<!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>この方法は、ワンクリックでのみスタイルを切り替えることができます。
2 番目の方法
<!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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。