Reactjs - Wie übergibt man Werte von der Kindkomponente zur Großelternteilkomponente?

Question

Unten finden Sie ein Beispiel für die Übergabe der Werte von untergeordneten Komponenten an übergeordnete Komponenten in reactjs.

App.jsx

import React from 'react'; 

class App extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
     data: 'Initial data...' 
     } 

     this.updateState = this.updateState.bind(this); 
    }; 

    updateState() { 
     this.setState({data: 'Data updated from the child component...'}) 
    } 

    render() { 
     return (
     <div> 
      <Content myDataProp = {this.state.data} 
       updateStateProp = {this.updateState}></Content> 
     </div> 
    ); 
    } 
} 

class Content extends React.Component { 

    render() { 
     return (
     <div> 
      <button onClick = {this.props.updateStateProp}>CLICK</button> 
      <h3>{this.props.myDataProp}</h3> 
     </div> 
    ); 
    } 
} 

export default App; 

main.js

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

ReactDOM.render(<App/>, document.getElementById('app')); 

Ich brauche mein Konzept klar über die Werte von Kind-Komponente Großeltern Komponente übergeben. Bitte, hilf mir dafür.

Answer 1

Sie können die Update-Funktion an das Grand-Kind von props weitergeben, übergeben Sie es einfach erneut aus der untergeordneten Komponente.

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     data: 'Initial data...' 
 
    } 
 
    this.updateState = this.updateState.bind(this); 
 
    } 
 

 
    updateState(who) { 
 
    this.setState({data: `Data updated from ${who}`}) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     Parent: {this.state.data} 
 
     <Child update={this.updateState}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class Child extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     Child component 
 
     <button onClick={() => this.props.update('child')}> 
 
      CLICK 
 
     </button> 
 
     <GrandChild update={this.props.update}/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class GrandChild extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     Grand child component 
 
     <button onClick={() => this.props.update('grand child')}> 
 
      CLICK 
 
     </button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

Der einfachste Weg ist update Funktionen so weit unten den Baum passieren, wie sie gehen müssen. Idealerweise wird Ihre Enkelkomponente als völlig getrennt von der Großelternkomponente betrachtet ... obwohl das schnell langweilig wird.

Das ist, was React Redux ist für. Es erstellt ein globales Statusobjekt mit einem Publish/Subscribe-Modell. (Das Publish/Subscribe-Modell wird durch einen "connect" -Wrapper etwas abstrahiert.) Sie können Aktionen von überall und überall ausführen. Aktionen lösen "Reduzierer" aus, die den globalen Zustand transformieren, und React reagiert auf den modifizierten Zustand, indem Komponenten (auf überraschend effiziente Weise) neu gerendert werden.

Für kleine Programme kann Redux Overkill sein. Wenn Sie nur das Großelternteil/Elternteil/Enkelkind in Ihrem Modell haben, übergeben Sie einfach die updateState-Funktionen. Wenn Ihr Programm wächst, ersetzen Sie sie durch Redux. Es kann schwierig sein zu lernen (vor allem, da IMHO die Standard-Tutorials einfach schrecklich sind), aber es ist die beabsichtigte Lösung für das allgemeine Problem, das du beschreibst.