Props

Einführung in Props

Props (kurz für Properties) sind der Mechanismus, mit dem Daten zwischen Components übertragen/ausgetauscht werden. Props werden als Attribute übergeben und als Parameter empfangen.

Dank Props ist es möglich ein Component wiederverwendbar zu machen. Man kann so mehrere Verwendungen vom gleichen Component mit unterschiedlicher Konfiguration in einer Anwendung haben.

Hier ist ein einfaches Beispiel, wie bestimmte Daten in ein Component hineingegeben und dort verwendet werden können.

const Greeter = (props) => {
    return <p>Hi, {props.name}</p>;
};

export default Greeter;

Die Verwendung von diesem Component und die Übergabe der Daten erfolgt wie folgt.

<Greeter name="Max" />

Der Parametername props kann natürlich auch ein anderer sein. In React ist es eine Namenskonvention. Technisch kann der Parameter auch völlig anders benannt werden.

Entpacken von Eigenschaften

Auch bei Verwendung von Props kann man Destruktion von Eigenschaften verwenden. Das kann vor allem bei höherer Anzahl von Eigenschaften einen bestimmten Sinn ergeben.

const User = ({ name, age, isActive }) => {
    return (
        <div class="user_wrapper">
            <div class="user_name">
                {name}
            </div>
            <div class="user_age">
                {age}
            </div>
            <div class="user_status">
                {isActive ? 'Active' : 'Inactive'}
            </div>
        </div>
    );
};

export default User;

Die Verwendung erfolgt dabei nach dem gleichen Schema.

<User
    name="Max"
    age={30}
    isActive={true}
/>

Standardwerte für Props

Es besteht die Möglichkeit, Standardwerte für Props festzulegen. Im nächsten Beispiel wird ein Component CustomButton erstellt. In diesem werden die Eigenschaften mit Standardwerten vorbelegt.

import './CustomButton.scss';

const CustomButton = ({ text = 'Speichern', type = 'default' }) => {
    return (
        <button className={`btn btn_${type}`}>{text}</button>
    );
};

export default CustomButton;

Vollständigskeitshalber hier auch das zugehörige SCSS.

.btn {
    padding: 10px;
    border-radius: 6px;
    border: 0;
    box-sizing: border-box;
    margin-right: 10px;
    &.btn_default {
        color: #222222;
        background-color: #cccccc;
    }
    &.btn_primary {
        color: #ffffff;
        background-color: #0c55a3;
    }
    &.btn_secondary {
        color: #ffffff;
        background-color: #1c5d52;
    }
}

npm install sass-embedded

npm install --save sass-embedded

Die Verwendung kann nun auf mehrere Arten erfolgen. Da Standardwerte definiert sind, muss man diese Eigenschaften nicht notwendigerweise in das Component übergeben. Bei Übergabe von Daten werden die Standardwerte überschrieben.

<CustomButton />
<CustomButton type="primary" />
<CustomButton text="Senden" />
<CustomButton text="Weiter" type="secondary" />

So wie man im oberen Beispiel sehen kann, sind alle Eigenschaften mit Standardwerten optional. Das ist eine bequeme Möglichkeit Fallbacks für bestimmte Kontexte eines Components zu definieren.

Komplexere Datentypen als Props

Man kann in React nicht nur primitive Datentypen, wie eine Zeichenkette oder eine Zahl, für Props-Eigenschaften verwenden. Es besteht genauso die Möglichkeit komplexere Datentypen zu verwenden, um mehrere Informationseinheiten zu gruppieren. Es können Arrays oder Objekte sein, welche man übergibt.

Im nächsten Beispiel erzeugen wir ein SampleProduct Component, das ein Objekt als Props-Eigenschaft annimmt, das alle Informationen zum Produkt beinhaltet.

const SampleProduct = ({ productData }) => {
    return (
        <div className="product_data">
            <ul>
                <li>
                    <strong>Artikelname:</strong> {productData.name}
                </li>
                <li>
                    <strong>Preis:</strong> {productData.price}
                </li>
                <li>
                    <strong>Art-Nr.:</strong> {productData.articleNumber}
                </li>
                <li>
                    <strong>Auf Lager:</strong> {productData.inStock ? 'Ja' : 'Nein'}
                </li>
            </ul>
        </div>
    );
};

export default SampleProduct;

Vor der Verwendung von diesem Component sollte man sicherstellen, dass das Datenobjekt (oder mehrere Datenobjekte) irgendwo definiert sind. In diesem Beispiel definieren wir ein Produkt-Objekt kurz vor der Verwendung.

import SampleProduct from './components/props/SampleProduct';

class App extends React.Component {
    render() {

        const productInfos = {
            name: 'Laptop',
            price: 1299.99,
            articleNumber: '87263',
            inStock: true
        };

        return (
            <>
                <h1>Objekt als Props-Eigenschaft</h1>
                <hr/>
                <SampleProduct productData={productInfos} />
            </>
        );
    }
}

export default App;

Props - children

Verwendung über props

React übergibt den Props in jedes Component, unabhängig davon, ob wir dieses Objekt in unseren Components verwenden oder nicht. Im Props-Objekt gibt es die besondere Eigenschaft children, welche nicht umbenannt werden kann. Dies ist eine besondere Eigenschaft. React verwendet sie dafür, um Zugriff auf alle, zwischen den öffnenden und schließenden Component-Tags sich befindende, Elemente zu ermöglichen.

Ein gutes Beispiel könnte ein CustomCard Component sein. Dabei definieren wir die Struktur, den Rahmen sozusagen, und der Inhalt kann ein beliebiger sein.

const CustomCard = (props) => {
    return (
        <div className="custom_card">
            {props.children}
        </div>
    );
};

export default CustomCard;

Bei der Verwendung muss man in diesem Fall das Component öffnen und auch schließen, also einen öffnenen Tag und einen schließenden Tag haben. Dazwischen kann man Inhalte platzieren, welche dann über die props.children Eigenschaft verfügbar gemacht werden.

<CustomCard>
    <p><strong>Hello</strong> card</p>
</CustomCard>

Mit dieser Konfiguration bekommt man den Inhalt einfach an die Position der Verwendung von props.children projeziert.

Entpacken des props Objekts

Man kann auch hier das Props-Objekt bei der Parameter-Verwendung entpacken und die Eigenschaften direkt verwenden.

const CustomCard = ({ children }) => {
    return (
        <div className="custom_card">
            {children}
        </div>
    );
};

export default CustomCard;

Kombination mit regulären Props-Eigenschaften

Es besteht die Möglichkeit neben children auch eigene Eigenschaften an das Props-Objekt anzuhängen und als weitere Konfiguration für das Component zu verwenden.

Wir erweitern das Beispiel mit CustomCard Component, um die Definitionsmöglichkeit des Titel des Card-Elements.

Dabei platziert man eigene Props-Eigenschaften einfach neben der children Eigenschaft.

const CustomCard = ({ cardTitle, children }) => {
    return (
        <div className="custom_card">
            <div className="card_title">
                <h2>{cardTitle}</h2>
            </div>
            <div className="card_content">
                {children}
            </div>
        </div>
    );
};

export default CustomCard;

Bei der Verwendung ist es ebenfalls eine Kombination aus Platzieren von Inhalten zwischen den Component-Tags und Angabe von Konfigurationsoptionen als Attribute.

<CustomCard cardTitle="Ein Titel hier">
    <p><strong>Hello</strong> card</p>
</CustomCard>