Detailliertes Beispiel für die Übergabe des Klassennamens durch React an die untergeordnete Komponente über die übergeordnete Komponente

React ist eine JAVASCRIPT-Bibliothek zum Erstellen von Benutzeroberflächen. In diesem Artikel wird hauptsächlich die Methode vorgestellt, mit der React den Klassennamen über die übergeordnete Komponente an die untergeordnete Komponente weitergibt. Freunde, die ihn benötigen, können darauf verweisen.

React-Tutorial

React ist eine JAVASCRIPT-Bibliothek zum Erstellen von Benutzeroberflächen.
React wird hauptsächlich zum Erstellen der Benutzeroberfläche verwendet. Viele Leute denken, dass React das V (Ansicht) in MVC ist.
React entstand als internes Projekt bei Facebook und wurde zum Aufbau der Instagram-Website verwendet und wurde im Mai 2013 als Open Source bereitgestellt.
React hat eine hohe Leistung und eine sehr einfache Codelogik. Immer mehr Menschen achten darauf und nutzen es.

React-Funktionen

1. Deklaratives Design – React übernimmt ein deklaratives Paradigma, das Anwendungen leicht beschreiben kann.
2. Effizient − React minimiert die Interaktion mit DOM durch Simulation von DOM.
3. Flexibel − React funktioniert gut mit bekannten Bibliotheken oder Frameworks.
4.JSX – JSX ist eine Erweiterung der JavaScript-Syntax. JSX ist für die React-Entwicklung nicht erforderlich, wird aber empfohlen.
5. Komponenten – Der Aufbau von Komponenten durch React erleichtert die Wiederverwendung von Code und kann gut bei der Entwicklung großer Projekte eingesetzt werden.
6. Einweg-Antwortdatenfluss – React implementiert einen unidirektionalen Antwortdatenfluss und reduziert dadurch doppelten Code, weshalb es einfacher ist als die herkömmliche Datenbindung.

1. Methode zur Übergabe von Klassennamen an untergeordnete Komponenten (Zeile 19)

2. Anwenden bestimmter Klassennamen über verschiedene Statuswerte (Zeile 22)

 import React from 'react'
import './style.css'
class PageTitle extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      timeType:0
    }
  }
  handleClick(timeType){
    this.setState({
      timeType:timeType
    });
    this.props.handle(timeType+1);
  }
  render() {
    const {title,dataList} = this.props;
    return (
     <h3 className={this.props.clasName+" cp_title"}>{title}
       <p className="floatR">
         {dataList.map((item,index) => {
           return <span key={index} onClick={this.handleClick.bind(this,index)} className={this.state.timeType === index ? "canvasNav canvasNavActive": "canvasNav"}>{item}</span>
         })}
       </p>
     </h3>
    )
  }
}
export default PageTitle;

Nachdem Sie diesen Artikel gelesen haben, sollten Sie über ein tieferes Verständnis des React-Wissens verfügen.

Verwandte Empfehlungen:

Detaillierte Erläuterung der kontrollierten und unkontrollierten Komponenten in React

Wie können Komponenten in React geschrieben werden?

So implementieren Sie Einzelauswahl, Mehrfachauswahl und umgekehrte Auswahl in Formularen in ReactJS

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Übergabe des Klassennamens durch React an die untergeordnete Komponente über die übergeordnete Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!