0 68

Im letzten Tutorial habe ich Euch gezeigt, wie Ihr innerhalb der Komponente Variablen an das HTML im JSX übergeben könnt.

Ihr müsst aber auch von außen Variablen oder Werte an die Komponente übergeben können.

Unter anderem kann Eure Komponente von einer anderen Komponente aufgerufen werden.
Um das machen zu können, braucht Ihr Props (von properties).

Wie das funktioniert zeige ich Euch jetzt.

Dazu passen wir nun zuerst die App.js an.

Wir fügen in den runden Klammern bei der Deklarierung der App props mit hinzu.

Jetzt wechseln wir in unsere index.js, in der wir die App-Komponente aufrufen und ergänzen dort im App-Element die Attribute num und title.
num soll die Zahl 5 enthalten und title den Text Headline.

Ein Text muss in Anführungszeichen stehen. Zahlen stehen dagegen in geschweiften Klammern.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'

ReactDOM.createRoot(
    document.getElementById('root')
).render(
    <App num={5} title="Headline" />
)

Wir wechseln jetzt zurück in die App.js und fügen die neuen Variablen ein. Beachte hierbei, dass die Variablen mit „props.“ aufgerufen werden.

const App = (props) => {

    return (
        <h1>Hi, ich bin Deine {props.num}. React-{props.title}!</h1>
    )
}

export default App

Auch das war nun relativ einfach.
Wir sind jetzt in der Lage Werte von außen an die Komponente zu übergeben.

Bisherige React Tutorials:

1: Wie installiere ich React?

2: React Tutorial – Wie funktioniert das mit HTML? JSX Einführung

3: React Tutorial – Was ist eine Komponente?

4: React Tutorial – Wie verwende ich Variablen in JSX?

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.