Übergeben Sie den Status zurück an die übergeordnete Komponente in React

1. Geben Sie Daten mit einer Callback-Funktion an die übergeordnete Komponente zurück
2. Übergeben Sie den Zustand zurück an die übergeordnete Komponente mit Requisiten
3. Übergeben Sie Daten von mehr als einer untergeordneten Komponente an die übergeordnete Komponente
4. Fazit

Eine Sache, die einen großartigen Entwickler vom Durchschnitt abhebt, ist die Fähigkeit, sauberen, gut formatierten Code zu schreiben.

Das ist das Gehirn hinter der React-Funktion, die es einem Programmierer ermöglicht, Informationen zu speichern und Operationen innerhalb einer Komponente auszuführen und dann einer anderen Komponente den Zugriff auf die Daten zu ermöglichen und sie zu verwenden. Das ist die Beziehung zwischen den untergeordneten und übergeordneten Komponenten in React.

Die übergeordnete Komponente oder die Ursprungskomponente hat bereits eine zu verarbeitende Operation. Ein Codierer, der einen anderen Prozess ausführen möchte, um Daten der Elternkomponente zu ersetzen, zu aktualisieren oder hinzuzufügen, erstellt die Kindkomponente, um dies zu tun.

Es gibt auch Fälle, in denen der Entwickler möglicherweise mehrere Daten an das übergeordnete Element weitergeben möchte. Das Erstellen mehrerer untergeordneter Komponenten ist auch ein idealer Weg, dies zu tun.

Dadurch wird die übergeordnete Komponente kürzer und aufgeräumter, mit weniger Code.

Geben Sie Daten mit einer Callback-Funktion an die übergeordnete Komponente zurück

Die callback-Funktion ist ein React-Konzept, mit dem Sie eine Funktion aufrufen können, sobald die Operation dieser Funktion verarbeitet wurde. Es ist eine einfache Möglichkeit, die Funktion in der untergeordneten Komponente an die übergeordnete Komponente zurückzurufen.

Wir beginnen mit der Erstellung eines neuen Projekts von unserem Terminal aus. Wir geben npx create-react-app illustrationone ein.

Nachdem das Projekt erstellt wurde, gehen wir zu dem Ordner in unserem Editor, wechseln in den Ordner src und erstellen eine neue Datei, Child.js. Wir werden im Beispiel mit der App.js und Child.js arbeiten.

Unsere App.js dient als übergeordnete Komponente, und wir werden die callback-Funktion wie folgt initiieren:

Code-Snippet (App.js):

import React from 'react';
import Child from './Child'
class App extends React.Component{

    state = {
        name: "",
    }

    handleCallback = (childData) =>{
        this.setState({name: childData})
    }

    render(){
        const {name} = this.state;
        return(
            <div>
                <Child parentCallback = {this.handleCallback}/>
                {name}
            </div>
        )
    }
}
export default App

Wir erstellen zuerst den Zustand name und deklarieren dann die Callback-Funktion, die die Daten erhält, die der Variablen name von der Komponente Child.js entsprechen.

Sobald wir die Daten von der untergeordneten Komponente zurückerhalten, erstellen wir eine Funktion, die die Daten zurückgibt, die der Variablen name in Child.js zugewiesen sind.

Als nächstes gehen wir zu Child.js und deklarieren hier die Operation, die wir durchführen möchten.

Code-Snippet (Child.js):

import React from 'react'
class Child extends React.Component{

    onTrigger = (event) => {
        this.props.parentCallback(event.target.myname.value);
        event.preventDefault();
    }

    render(){
        return(
        <div>
            <form onSubmit = {this.onTrigger}>
                <input type = "text"
                name = "myname" placeholder = "Enter Name"/>
                <br></br><br></br>
                <input type = "submit" value = "Submit"/>
                <br></br><br></br>
            </form>
        </div>
        )
    }
}
export default Child

Ausgabe:

Da wir diese Daten an die übergeordnete Komponente zurückgeben möchten, benötigen wir eine Funktion, die die callback-Funktion innerhalb der untergeordneten Komponente initiiert. Hier brauchen wir den Event-Listener onTrigger.

Sobald wir auf die Schaltfläche Submit klicken und das Ergebnis angezeigt wird, aktiviert der onTrigger sofort die callback-Funktion und überträgt den der Variablen name zugewiesenen Wert zurück an die übergeordnete Komponente.

Übergeben Sie den Zustand zurück an die übergeordnete Komponente mit Requisiten

Dies ist eine einfachere Methode im Vergleich zum vorherigen Beispiel. Wir verwenden props, um das verarbeitete Ergebnis an die übergeordnete Komponente zurückzugeben.

Wir navigieren zum Ordner src und erstellen eine neue Datei User.js. Dies wird unsere untergeordnete Komponente sein.

Die App.js ist unsere übergeordnete Komponente, und wir werden diese Codes übergeben:

Code-Snippet (App.js):

import React from 'react'
import './App.css';
import User from './User'
function App() {
  function getName(name) {
    alert(name)
  }
  return (
    <div className="App">
      <h1>Returning State Back to Parent</h1>
      <User getData={getName} />
    </div>
  );
}

export default App;

Wir erstellen eine name-Funktion, die dem React-Framework vorschreibt, dass es das der name-Funktion zugewiesene Datum erhalten soll. Dann wollen wir es warnen, d. h. wir wollen in Form eines Pop-ups zurückkommen.

Dann fügen wir etwas mehr Code in unsere User.js ein, die die untergeordnete Komponente ist:

Codeschnipsel (User.js):

function User(props)
{
    const name="Oluwafisayo"
    return(
        <div>
            <h1>My Name is : </h1>
            <button onClick={()=>props.getData(name)} >Click Me</button>
        </div>
    )
}

export default User;

Ausgabe:

Hier weisen wir die Daten der Funktion name zu, und sobald die Schaltfläche Click me gedrückt wird, aktiviert sie den Event-Listener onClick, der die Daten als Props an den Parent zurückgibt. Denken Sie daran, dass props die Abkürzung für Eigenschaften ist.

Übergeben Sie Daten von mehr als einer untergeordneten Komponente an die übergeordnete Komponente

Da wir Daten von zwei untergeordneten Komponenten an die übergeordnete Komponente übergeben, erstellen wir eine Datei TodoList.js für die übergeordnete Komponente und zwei Dateien Todo.js und DeadlineList.js für die untergeordneten Komponenten.

Die übergeordnete Komponente enthält die Codes, die die Funktionen zum Ableiten der Daten definieren, die wir von den untergeordneten Komponenten abrufen möchten:

Code-Snippet (TodoList.js):

import React from "react";
import Todo from "./Todo";
import DeadlineList from "./DeadlineList";

const TodoList = ({ todos, toggleTodo }) =>
  console.log(todos) || (
    <table>
      <tbody>
        <tr>
          <th className="taskTH">TASK</th>
          <th className="deadlineTH">DEADLINE</th>
        </tr>
        <tr>
          <td className="taskTD">
            {todos.map((todo) => (
              <Todo
                key={todo.id}
                text={todo.text}
                completed={todo.completed}
                toggleTodoItem={() => toggleTodo(todo.id)}
              />
            ))}
          </td>
          <td className="deadlineTd">
            {" "}
            {todos.map(
              (todo) =>
                console.log("TODO", todo) || (
                  <DeadlineList
                    key={todo.id}
                    value={todo.date}
                    completed={todo.completed}
                    onClick={() => toggleTodo(todo.id)}
                  />
                )
            )}
          </td>
        </tr>
      </tbody>
    </table>
  );

export default TodoList;

Als nächstes arbeiten wir an Todo.js, einem Formular. Sobald die Daten eingegeben wurden und wir auf die Schaltfläche Todo hinzufügen klicken, werden die Daten zurückgegeben:

Code-Snippet (Todo.js):

import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'

const Todo = (props) => {

    const { toggleTodoItem, completed, text } = props;

    let [ shouldPlaySound, setShouldPlaySound ] = useState(true);

    function wooHooEverySecondClick() {
        if (shouldPlaySound) {
            wooHooSound.play();
            setShouldPlaySound(false);
        } else {
            setShouldPlaySound(true);
        }
    }

    return (
        <li className="bananaLi"
            onClick={() => {
                toggleTodoItem();
                wooHooEverySecondClick();
            }}
            style={{
                textDecoration: completed ? 'line-through' : 'none'
            }}
        >

            {text}

        </li>
    );
};

export default Todo;

Dann ist die DeadlineList.js dafür zuständig, die Liste in Form eines Listenformats an den Parent zu rendern:

Code-Snippet (DeadlineList.js):

import React from "react";

const DeadlineList = ({ onClick, completed, value }) => {
  return (
    <li
      className="deadlineLi"
      onClick={onClick}
      style={{
        textDecoration: completed ? "line-through" : "none"
      }}
    >
      {new Intl.DateTimeFormat("en-US").format(value)}
    </li>
  );
};

export default DeadlineList;

Dann importieren wir alles innerhalb der App.js:

Code-Snippet (App.js):

import React from 'react';
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList';
import Footer from './Footer';

const App = () => (

    <div className="appCSS">

        <AddTodo />
        <VisibleTodoList />
        <Footer />

    </div>

);

export default App;

Ausgabe:

Fazit

Wenn Entwickler ein Projekt als Team erstellen, macht es das Schreiben kohärenter Shortcodes pro Komponente einfach, Hilfe von Teamkollegen zu erhalten. Im Gegensatz dazu wird ein Projekt mit verstopften Codes leicht einen anderen Entwickler abschrecken, der helfen möchte.