如何從組件外部重新渲染組件

Question

下面是我的反應代碼。 我有一個編輯配置文件路由，該路由允許編輯用戶配置文件。 完成變異請求后，我想更新標頭組件中的用戶詳細信息（用戶頭像，名字和姓氏）。 怎么做？

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

這是基本的反應溝通，有幾種標准的方法可以做到這一點。 您已經知道可以使用props和refs（可能知道）將數據從父級傳遞到子級。 為了實現其他方式（從孩子到父母）的通信，標准且最簡單的方法是在prop內部提供回調：

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)} />
   }
}

然后，在子組件中，您可以執行以下操作：

this.props.someFunc()

還有其他方法，例如使用redux / flux存儲並通過觀察者模式進行通信，使用觀察者模式等。有關此的更多信息，請參見此處。React組件通信