react.js实现动态字体颜色切换讲述-js教程-PHP中文网

react.js实现动态字体颜色切换讲述

韦小宝

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

原创

4603人浏览过

本篇文章讲述了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>

登录后复制

两者之间没什么多大的区别，主要是第二种运用了三元运算符，实现了点击循环切换的功能。

相关推荐：

react.js给标识ref，获取内容

用很简单的实例理解react.js高阶组件思想

以上就是react.js实现动态字体颜色切换讲述的详细内容，更多请关注php中文网其它相关文章！