react.js實作動態字體顏色切換講述-js教程-PHP中文網

react.js實作動態字體顏色切換講述

韦小宝

發布： 2018-03-14 12:40:30

原創

4462 人瀏覽過

這篇文章講述了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>

登入後複製

兩者之間沒什麼多大的區別，主要是第二種運用了三元運算符，實現了點擊循環切換的功能。

相關推薦：

#react.js給予識別ref，取得內容

#用很簡單的實例理解react.js高階元件想法

以上是react.js實作動態字體顏色切換講述的詳細內容。更多資訊請關注PHP中文網其他相關文章！