reactjs(3) 글꼴 색 전환을 어떻게 동적으로 실현합니까
8257 단어 react-js
글꼴 색을 동적으로 전환하는 방법은 두 가지가 있다.
첫 번째 방식
<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>이런 방식은 클릭 한 번만 스타일을 전환할 수 있다.
두 번째 방식
<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>
둘 사이에는 큰 차이가 없다. 주로 두 번째는 삼원 연산자를 운용하여 클릭 순환 전환 기능을 실현했다.
좋은 웹페이지 즐겨찾기
