有兩種方式來實作動态切換字型顔色。
第一種方式
<!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>
<div id="example"></div>
<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>
<div id="example"></div>
<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>
兩者之間沒什麼多大的差別，主要是第二種運用了三元運算符，實作了點選循環切換的功能。
![學習筆記（持續更新）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)