React.js는 동적 글꼴 색상 전환 설명을 구현합니다.
- 韦小宝원래의
- 2018-03-14 12:40:304464검색
이 글에서는 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>둘 사이에는 큰 차이가 없습니다. 중요한 점은 두 번째 방법이 삼항 연산 연산자를 사용하여 클릭 loop 전환 기능을 구현한다는 것입니다.
관련 권장 사항:
react.js 상위 수준 구성 요소의 아이디어를 이해하려면 매우 간단한 예를 사용하세요
위 내용은 React.js는 동적 글꼴 색상 전환 설명을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：class="no-js"는 무슨 뜻인가요?다음 기사：class="no-js"는 무슨 뜻인가요?