React.js での CSS の使用法-jsチュートリアル-php.cn

React.js での CSS の使用法

php中世界最好的语言

リリース： 2018-03-13 14:56:50

オリジナル

3085 人が閲覧しました

今回はReact.jsでのCSSの使い方について、実際の事例を交えて見ていきましょう。インラインスタイル（Web開発には推奨されませんが、React-Nativeでは広く使用されています）

欠点は、アニメーション、疑似クラス（ホバー）などが使用できないことです

import React from 'react';export default class ComponentHeader extends React.Component {
render() {    const styleComponentHeader = {        header: {            backgroundColor: '#333333',            color: '#FFFFFF',            "padding-top": '15px',            paddingBottom: '15px'
        },        // 还可以定义其他的样式
    };    return (        <header>
            <h1>这里是头部</h1>
        </header>
    )
  }
}

ログイン後にコピー

React.js での CSS の使用法 2.インラインスタイルの式

: クリックすると、padding-top とpaddingBottom が大きくなったり小さくなったりします

import React from &#39;react&#39;;export default class ComponentHeader extends React.Component {constructor() {  super();  this.state = {      miniHeader: false
  };
}
switchHeader() {  this.setState({      miniHeader: !this.state.miniHeader
  });
};
render() {  const styleComponentHeader = {      header: {          backgroundColor: &#39;#333333&#39;,          color: &#39;#FFFFFF&#39;,          "padding-top": this.state.miniHeader ? &#39;3px&#39; : &#39;15px&#39;,          paddingBottom: this.state.miniHeader ? &#39;3px&#39; : &#39;15px&#39;
      },      // 还可以定义其他的样式
  };      return (          <header style={styleComponentHeader.header} onClick={this.switchHeader.bind(this)}>
              <h1>这里是头部</h1>
          </header>
      )
  }
}

ログイン後にコピー

3. CSS React.js での CSS の使用法 Modular

まず、babel-plugin-react-html- を使用して、次の 3 つのプラグインを npm します

"babel-plugin-react-html-attrs": "^2.0.0","style-loader": "^0.13.1","css-loader": "^0.25.0"

ログイン後にコピー

Attrs プラグインでは、タグにクラスを追加するときに、そのクラスを直接使用できます

<h1 class="smallFontSize">这里是头部</h1>

ログイン後にコピー

このプラグインを使用する前にクラスを使用することはできません。使用できるのはクラス名のみです

<h1 className="smallFontSize">这里是头部</h1>

ログイン後にコピー

JSX スタイルと JSX スタイルの間の相互変換。 CSS スタイル

右側のコードを使いたい場所にコピーします。具体的な使い方は以下の通りです: React.js での CSS の使用法

import React from &#39;react&#39;;export default class ComponentFooter extends React.Component {
render() {    var footerConvertStyle = {        "miniFooter": {            "backgroundColor": "#333333",            "color": "#ffffff",            "paddingLeft": "20px",            "paddingTop": "3px",            "paddingBottom": "3px"
        },        "miniFooter_h1": {            "fontSize": "15px"
        }
    }    return (        <footer style={footerConvertStyle.miniFooter}>
            <h1 style={footerConvertStyle.miniFooter_h1}>这是页脚, 一般放置版权的一些信息.</h1>
        </footer>
    )
  }
}

ログイン後にコピー

この記事の事例を読んで、方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

Vue.js はトランジションアニメーションを使用してルートジャンプアニメーションを作成します

Vue.js のルートの名前付けとビューの名前付け

Vue.js のルートパラメーター

以上がReact.js での CSS の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。