Zusammenfassung der Methode von React zum Erstellen von Komponenten

1. Komponenten mit Funktionen erstellen

Funktionale Komponenten: Komponenten, die mit JS-Funktionen (oder Pfeilfunktionen) erstellt wurden

Konvention 1: Funktionsnamen müssen mit einem Großbuchstaben beginnen

Konvention 2: Funktionskomponenten müssen einen Rückgabewert haben, der die Struktur der Komponente angibt

Wenn der Rückgabewert null ist, bedeutet dies, dass nichts gerendert wird.

Funktion Hallo() {
    zurückkehren (
        <div>Dies ist meine erste funktionsfähige Komponente! </div>
    )
}
const Hello = () => <div> Dies ist meine erste funktionale Komponente! </div>

Rendering-Funktionskomponente: Verwenden Sie den Funktionsnamen als Komponenten-Tagnamen

Bauteilbeschriftungen können einfach oder doppelt sein

//1. Reagieren importieren
importiere React von „react“;
importiere ReactDOM von „react-dom“;

/*
  Funktionskomponenten:
*/
Funktion Hallo() {
  zurückkehren (
    <div>Dies ist meine erste funktionsfähige Komponente! </div>
  )
}

// Rendering-Komponente ReactDOM.render(<Hello />, document.getElementById('root'))

2. Erstellen Sie Komponenten mit Klassen

Komponentenklasse: eine mit der ES6-Klasse erstellte Komponente

Konvention 1: Klassennamen müssen ebenfalls mit einem Großbuchstaben beginnen

Konvention 2: Klassenkomponenten sollten die übergeordnete Klasse React.Component erben, damit sie die von der übergeordneten Klasse bereitgestellten Methoden oder Eigenschaften verwenden können.

Konvention 3: Klassenkomponenten müssen eine render()-Methode bereitstellen

Konvention 4: Die render()-Methode muss einen Rückgabewert haben, der die Struktur der Komponente angibt

//1. Reagieren importieren
importiere React von „react“;
importiere ReactDOM von „react-dom“;

/*
  Funktionskomponenten:
*/
Funktion Hallo() {
  zurückkehren (
    <div>Dies ist meine erste funktionsfähige Komponente! </div>
  )
}

// Rendering-Komponente ReactDOM.render(<Hello />, document.getElementById('root'))

3. In eine unabhängige JS-Datei extrahieren

1. Erstellen Sie Hello.js

2. Importieren Sie React in Hello.js

3. Komponenten (Funktionen oder Klassen) erstellen

4. Exportieren Sie die Komponente in Hello.js

5. Importieren Sie die Hello-Komponente in index.js

6. Rendering-Komponenten

Hallo.js

importiere React von „react“;

//Komponentenklasse erstellen Hello extends React.Component {
    rendern () {
        zurückkehren (
            <div>Dies ist meine erste in eine JS-Datei extrahierte Komponente! </div>
        )
    }
}

//Komponente exportieren export default Hallo

index.js

//1. Reagieren importieren
importiere React von „react“;
importiere ReactDOM von „react-dom“;

/*
  Extrahieren Sie Komponenten in separate JS-Dateien:
*/

//Hallo importieren componentimport Hello von './Hello';

// Rendering-Komponente ReactDOM.render(<Hello />, document.getElementById('root'))

Damit ist dieser Artikel über zwei Möglichkeiten zum Erstellen von React-Komponenten abgeschlossen. Weitere Informationen zum Erstellen von React-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!