React Tutorial 5 – Props oder wie übergebe ich die Variablen an die Komponente?

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.

const App = (props) => {

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?