suchen

Heim >Web-Frontend >js-Tutorial >React.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe

React.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe

韦小宝
韦小宝Original
2018-03-14 12:40:304464Durchsuche

In diesem Artikel wird beschrieben, wie „react.js“ den dynamischen Wechsel der Schriftfarben implementiert. Wer mit der Implementierung des dynamischen Schriftfarbenwechsels durch „react.js“ nicht vertraut ist, kann sich diesen Artikel direkt ansehen Wie React.js die dynamische Umschaltung der Schriftfarbe implementiert!

Es gibt zwei Möglichkeiten, die Schriftfarben dynamisch zu ändern.

Die erste Methode

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

Diese Methode kann den Stil nur mit einem Klick wechseln.

Die zweite Methode

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

Es gibt keinen großen Unterschied zwischen den beiden. Die Hauptsache ist, dass die zweite Methode den ternären Betrieb-Operator verwendet, um den Klick zu realisieren Loop Schaltfunktion.

Verwandte Empfehlungen:

react.js gibt die Logo-Referenz an und ruft den Inhalt ab

Verwenden Sie ein sehr einfaches Beispiel, um die Idee der höherwertigen Komponenten von react.js zu verstehen

Das obige ist der detaillierte Inhalt vonReact.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was bedeutet class="no-js"?Nächster Artikel：Was bedeutet class="no-js"?

In Verbindung stehende Artikel

Mehr sehen