CSS-Verwendung in React.js

Dieses Mal werde ich Ihnen die Verwendung von CSS in React.js vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS in React.js? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Inline-Stile (nicht für die Webentwicklung empfohlen, aber in React-Native weit verbreitet)

Der Nachteil besteht darin, dass Animationen, Pseudoklassen (Hover) usw. nicht verwendet werden können

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>
    )
  }
}

2. Ausdruck im Inline-Stil: Beim Klicken werden padding-top und paddingBottom größer oder kleiner

import React from 'react';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: '#333333',          color: '#FFFFFF',          "padding-top": this.state.miniHeader ? '3px' : '15px',          paddingBottom: this.state.miniHeader ? '3px' : '15px'
      },      // 还可以定义其他的样式
  };      return (          <header style={styleComponentHeader.header} onClick={this.switchHeader.bind(this)}>
              <h1>这里是头部</h1>
          </header>
      )
  }
}

3.CSSModularisierung
Zuerst npm die folgenden drei Plug-Ins

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

Verwenden Sie das babel-plugin-react-html-attrs-Plugin -in: Wenn Sie eine Klasse zu einem Tag hinzufügen, können Sie die Klasse direkt verwenden

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

Sie können die Klasse nicht vor der Verwendung dieses Plug-Ins verwenden, Sie können nur den Klassennamen verwenden

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

4.JSX-Stil und CSS-Stil-Austausch

Kopieren Sie den Code rechts an die Stelle, an der Sie ihn verwenden möchten:

import React from 'react';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>
    )
  }
}

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Nachdem Sie die Methode gemeistert haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

Vue.js verwendet Übergangsanimationen, um Routensprunganimationen zu erstellen

Vue.js Routenbenennung und benannte Ansichten

Routenparameter für Vue.js

Das obige ist der detaillierte Inhalt vonCSS-Verwendung in React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!