Heim > Artikel > Web-Frontend > React.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe
React.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe
- 韦小宝Original
- 2018-03-14 12:40:304360Durchsuche
In diesem Artikel wird beschrieben, wie „react.js“ den dynamischen Wechsel der Schriftfarben implementiert. Wer mit der Implementierung des dynamischen Schriftfarbenwechsels durch „react.js“ nicht vertraut ist, kann sich diesen Artikel direkt ansehen Wie React.js die dynamische Umschaltung der Schriftfarbe implementiert!
Es gibt zwei Möglichkeiten, die Schriftfarben dynamisch zu ändern.
Die erste Methode
<!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>Diese Methode kann den Stil nur mit einem Klick wechseln.
Die zweite Methode
<!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>Es gibt keinen großen Unterschied zwischen den beiden. Die Hauptsache ist, dass die zweite Methode den ternären Betrieb-Operator verwendet, um den Klick zu realisieren Loop Schaltfunktion.
Verwandte Empfehlungen:
react.js gibt die Logo-Referenz an und ruft den Inhalt ab
Das obige ist der detaillierte Inhalt vonReact.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!