React.js は動的フォントカラー切り替え記述を実装します-jsチュートリアル-php.cn

React.js は動的フォントカラー切り替え記述を実装します

韦小宝

リリース： 2018-03-14 12:40:30

オリジナル

4420 人が閲覧しました

この記事では、react.js が動的フォントカラー切り替えを実装する方法について説明します。react.js による動的フォントカラー切り替えの実装に慣れていない学生は、この記事を一緒に見てみましょう。 React.js が動的フォントカラー切り替えを実装する方法!

フォントの色を動的に切り替える方法は 2 つあります。

最初の方法

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

ログイン後にコピー

この方法は、ワンクリックでのみスタイルを切り替えることができます。

2 番目の方法

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

ログイン後にコピー

2 つの間に大きな違いはありません。主なことは、2 番目の方法では、三項演算演算子を使用してクリックループ切り替え機能を実現するということです。

関連する推奨事項:

react.js ref をマークしてコンテンツを取得する

非常に簡単な例を使用して、react.js の高レベルコンポーネントの概念を理解する

以上がReact.js は動的フォントカラー切り替え記述を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。