javascript - react组件通信

Question

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

Answer 1

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

Answer 2

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

• top

  • a

  • b

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

Answer 3

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