Wie man eine Reaktionskomponente von außerhalb dieser Komponente wieder rendert

Question

Unten ist mein reactive code. Ich habe eine Profilroute bearbeiten, die das Bearbeiten des Benutzerprofils ermöglicht. Nach Abschluss der Mutationsanforderung möchte ich die Benutzerdetails (Benutzeravatar, Vorname und Nachname) in der Header-Komponente aktualisieren. Wie wird das gemacht?

import React from 'react'; 
import Relay from 'react-relay'; 
import { IndexRoute, Route } from 'react-router'; 

import Header from './header'; 
import Sidebar from './sidebar'; 
import Footer from './footer'; 

import Query from './Query'; 

import EditProfile from './routes/Profile'; 

class App extends React.Component { render() { 
return (
    <Container {...this.props}> 
    <Sidebar /> 
    <Header /> 
    <div id='body'> 
     {this.props.children} 
    </div> 
    <Footer /> 
    </Container> 
); } } 

export default (
<Route path='/' component={App}> 
    <IndexRoute component={EditProfile} queries={Query} /> 
</Route> 
); 

Answer 1

Dies ist grundlegende Reaktion Kommunikation, und es gibt mehrere Standard-Wege, wie Sie das tun. Sie wissen bereits, dass Sie Daten von Eltern zu Kind weitergeben können, indem Sie Requisiten und Referenzen verwenden (wahrscheinlich bewusst). die Kommunikation umgekehrt (von Kind zu Eltern) zu erreichen, Standard und einfachste Weg ist Rückruf innerhalb Stütze zu bieten:

class SomeParent extends Component { 
    // This method is using es6 class properties 
    // in order to skip .bind(this) 
    handleChildFunc(someData) => { 
     console.log(someData) 
    } 
    render() { 
    return <SomeChild someFunc={this.handleChildFunc(this)} /> 
    } 
} 

Dann in der Kind-Komponente können Sie einfach tun:

this.props.someFunc() 

Es gibt auch andere Methoden wie die Verwendung des Redux/Flux-Speichers und kommunizieren durch sie, unter Verwendung eines Beobachtermusters etc. Mehr darüber kann hier gelesen werden React component communication