reactjs(三)怎么动态实现字体颜色的切换

最新推荐文章于 2024-05-10 09:59:32 发布

躺屋顶看月亮

最新推荐文章于 2024-05-10 09:59:32 发布

阅读量1.9w

点赞数

分类专栏： react-js 文章标签： reactjs 样式切换

本文链接：https://blog.csdn.net/liuxuan12417/article/details/54096172

版权

react-js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

有两种方式来实现动态切换字体颜色。

第一种方式

<!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>
    <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>

这种方式只能实现点击一次切换样式。

第二种方式

<!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>
    <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>

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

躺屋顶看月亮

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
reactjs(三)怎么动态实现字体颜色的切换

有两种方式来实现动态切换字体颜色。第一种方式<!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>
复制链接

扫一扫