React.js implémente une description dynamique du changement de couleur de police-js tutoriel-php.cn

React.js implémente une description dynamique du changement de couleur de police

韦小宝

Libérer： 2018-03-14 12:40:30

original

4493 Les gens l'ont consulté

Cet article décrit comment React.js implémente le changement dynamique de couleur de police. Les étudiants qui ne sont pas familiers avec React.js implémentant le changement dynamique de couleur de police peuvent jeter un œil à cet article avec nous. Arrêtons de dire des bêtises. comment React.js implémente le changement dynamique de couleur de police !

Il existe deux façons de changer dynamiquement les couleurs de police.

La première méthode

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

Copier après la connexion

Cette méthode ne peut changer de style qu'en un seul clic.

La deuxième méthode

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

Copier après la connexion

Il n'y a pas beaucoup de différence entre les deux. L'essentiel est que la deuxième méthode utilise l'opérateur opération ternaire pour réaliser le clic. Fonction de commutation Boucle.

Recommandations associées :

react.js donne la référence du logo et obtient le contenu

Utilisez un exemple très simple pour comprendre l'idée des composants d'ordre supérieur de React.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!