React.js는 동적 글꼴 색상 전환 설명을 구현합니다.-JS 튜토리얼-php.cn

React.js는 동적 글꼴 색상 전환 설명을 구현합니다.

韦小宝

풀어 주다： 2018-03-14 12:40:30

원래의

4427명이 탐색했습니다.

이 글에서는 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(&#39;example&#39;)
      );
    </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(&#39;example&#39;)
      );
    </script>
  </body>
</html>

로그인 후 복사

둘 사이에는 큰 차이가 없습니다. 중요한 점은 두 번째 방법이 삼항 연산 연산자를 사용하여 클릭 loop 전환 기능을 구현한다는 것입니다.

관련 권장 사항:

react.js 참조 표시 및 콘텐츠 가져오기

react.js 상위 수준 구성 요소의 아이디어를 이해하려면 매우 간단한 예를 사용하세요

위 내용은 React.js는 동적 글꼴 색상 전환 설명을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!