javascript - react组件通信

问题描述

问 题

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

解决方案

问题中的同级别组件, 我理解为是在同一个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会重新渲染.

这篇关于javascript - react组件通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！