React.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe-js-Tutorial-php.cn

React.js implementiert eine dynamische Beschreibung zum Wechseln der Schriftfarbe

韦小宝

Freigeben： 2018-03-14 12:40:30

Original

4462 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!