Daten zwischen React Komponenten austauschen

Gerade wenn man in React einsteigt stößt man schnell auf das Problem wie man Daten zwischen Komponenten austauscht. Dazu findet man zum Glück schnell eine Erklärung in der offiziellen Dokumentation von React.

Nun warum schreibe ich dann also diesen Artikel wenn es doch so einfach ist? Das liegt daran, dass man schnell in Situationen gerät, wo man Daten in verschiedene Richtungen zwischen Komponenten weitergeben möchte. Also nicht nur von Parent zum Children, sondern auch gerne mal vom Children zum Parent oder sogar zwischen Siblings ohne gleich Redux zu verwenden, gerade wenn man ReactJs noch am lernen ist. Dazu gibt es einen "Trick" und den möchte ich kurz erläutern.

UseCase 1 - Daten vom Parent zum Children austauschen

Im einfachsten Fall möchten wir Daten von oben nach unten weiter geben. In unserem Beispiel von Komponente Parent zu Komponente Children. Bildlich sehe es so aus:

secase

Dies können wir ganz einfach über die Props machen.

import React, { Component } from "react";
import Children from "./Children";

export default class Parent extends Component {
  render() {
    return (
      <div>
        <Children childrenName={"Max"} />
      </div>
    );
  }
}

In diesem beispiel habe ich einfach in der Children Komponente eine Prop childrenName angegeben mit dem Inhalt "Max".

Nun kann man in der Children Komponente einfach die Daten mit this.props.childrenData auslesen.

import React, { Component } from "react";

export default class Children extends Component {
  render() {
    return <div>Mein Name ist: {this.props.childrenData}</div>;
  }
}

Hier ein fertiges Beispiel:

UseCase 2 - Daten vom Children zum Parent austauschen

Interessanter wird es wenn wir in die andere Richtung Daten austauschen möchten. Dazu gibt es einen kleinen Trick.

  1. Dazu definieren wir einen Callback in der Parent Komponente, welche die Daten dann über die Parameter des Callbacks erhält.
  2. Dieser Callback wird über die Props an den Children übergeben.
  3. Die Children Komponente führt den Callback über die Props aus und übergibt die Daten für den Parent als Argumente der Function.

secase

So könnte es im Parent aussehen:

import React, { Component } from "react";
import Children from "./Children";

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.dataFromChild = "Bist du satt?";
  }

  setData(data) {
    this.dataFromChild = data;
    console.log(this.dataFromChild)
  }

  render() {
    console.log(this.dataFromChild);
    return (
      <div>
        Eltern
        <Children setParentData={this.setData.bind(this)} />
      </div>
    );
  }
}

Ich habe im Parent eine Funktion setData(data) definiert und gebe diese dem Children über die Prop setParentData. Nun kann ich diese Funktion als Callback im Children mit this.props.setParentData(data) aufrufen.

import React, { Component } from "react";

export default class Children extends Component {

  componentDidMount() {
    this.props.setParentData("Ich habe hunger!");
  }

  render() {
    return <div>Kind</div>;
  }
}

In der Konsole können wir den Inhalt von this.dataFromChild verfolgen und sehen, dass der Datenaustausch geklappt hat.

Wenn die Daten vom Children nicht nur innerhalb des Callbacks, sondern in der kompletten Komponente erreichbar sein soll, können die Daten einfach in die State abgelegt werden.

Dazu ein fertiges Beispiel:

UseCase 3 - Daten zwischen Zwillingen ausstauschen

Bei Komponenten die vom selben Parent eingebunden werden, läuft der Datenaustausch nicht anders wie bisher. Die Parent Komponente wird hier einfach als Vermittler benutzt. Dazu gibt der Parent den einen Children über die Props eine Callback-Funktion, damit dieser die Callback-Funktion aufruft und die Daten als Argument übergebt. Gleichzeitig übergibt der Parent die Daten vom Sibling 1 die in der State liegen über die Props den Sibling 2.

secase

import React, { Component } from "react";
import Sibling1 from "./Sibling1";
import Sibling2 from "./Sibling2";

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataFromSibling1: ""
    };
  }

  setData(data) {
    this.setState({ dataFromSibling1: data });
    console.log(this.state.dataFromSibling1);
  }

  render() {
    return (
      <div>
        <Sibling1 setDataToSibling2={this.setData.bind(this)} />
        <Sibling2 dataFromSibling1={this.state.dataFromSibling1} />
      </div>
    );
  }
}

Im Grunde werden nur die beiden Varianten von UseCase 1 und UseCase 2 hier miteinander verbunden.

Hier nochmal ein fertiges Beispiel:

Diese Webseite verwendet Cookies, beim Absenden von Kommentaren. Hier finden Sie weitere Informationen zum Datenschutz Akzeptieren