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 component communication

如何从组件外部重新生成反应组件

1 个答案: