Wie schreibe ich in React

So schreiben Sie den Stil in React: 1. Verwenden Sie den Inline-Stil. 2. Verwenden Sie die Klassennamen, um den Stil dynamisch zu ändern. 4. Verwenden Sie das Plug-in [styled-components], um den Beschriftungsstil zu schreiben.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17-Version. Diese Methode ist für alle Computermarken geeignet.

So schreiben Sie den Stil in React:

import React, { Fragment } from "react";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
      const txtColor = {
          color: '#F00'
      }
    return (
     <Fragment>
         <h1 style={txtColor}></h1>
     </Fragment>
    );
  }
}
export default Style;

Diese Schreibmethode wird nicht empfohlen, wenn es zu viele Stile gibt.

2

import React, { Fragment } from "react";
import "./../../style.css";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
     <Fragment>
         <h1 className="textColor"></h1>
     </Fragment>
    );
  }
}
export default Style;

Erstellen Sie eine neue .css-Datei, importieren Sie die Datei, verwenden Sie className="textColor" im Tag. Sie können den Stil mit der Klasse „textColor“ im importierten verwenden .css-Datei Ja. Diese Methode reicht für allgemeine Projekte.

3. Verwenden Sie Klassennamen, um den Stil dynamisch zu ändern Die Klasse des h1-Tags hat textColor und textTitle. Sie wird im Allgemeinen auch in Projekten verwendet.

import React, { Fragment } from "react";
import classNames from 'classnames'
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
     <Fragment>
         <h1 className={classNames(&#39;textColor&#39;, {&#39;textContent&#39;: false} ,{&#39;textTitle&#39;: true})}></h1>
     </Fragment>
    );
  }
}
export default Style;

Verwenden Sie styled-components Um Stile für Beschriftungen zu schreiben, müssen Sie zuerst das obige Plug-In installieren. Der Code besteht darin, einen Titel zu definieren, den Stil für das h1-Tag festzulegen und dann den in der Komponente verwendeten Titel mit dem gestalteten h1-Tag zu vergleichen . Diese Methode wird häufiger in großen Projekten verwendet

Das obige ist der detaillierte Inhalt vonWie schreibe ich in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!