首页 > react组件通信

react组件通信

两个同级的组件之间怎么通信,实现组件A状态改变,B跟着刷新。现在功能就是点击表头对后台数据数组进行排序,然后刷新给页面的数据列表。现在能看到后台数据已经排序完成,但是数据列表组件并没有随着更新UI。这个功能应该怎么实现,用的Redux。


当你发现这样的需求的时候 说明应该有一个父组件包含a和b,即

数据应该在top中存储,并向子组件传递~


问题中的同级别组件, 我理解为是在同一个container下的两个component, 首先要在container中调用connect()方法, 将state作为props传递下去, 代码如下:

function mapStateToProps(state) {
  const props = {
    todos: selectTodos(state.todos, state.visibilityFilter),
    filter: state.visibilityFilter
  };
  return props;
}
export default connect(mapStateToProps)(App);

这相当于订阅了state的更改事件, state如果发现改变会调用mapStateToProps, 并将最新的state传递下去, 同时有更改的component会重新渲染.


这个不难啊,虽然react是单向数据流,但是可以通过linkState()来传递数据,具体看官方文档有demo

【热门文章】
【热门文章】