Redux反应组件间通信

Question

我有以下简化的组件结构

ChildC10基本上是一个列表，每个项目都有一堆复选框。用户可以从此列表中选择一个或多个。

ChildC1包含一个按钮，单击时应选择ChildC10中选中的项目。我如何使用React，Redux。

Answer 1

父级应该具有包含列表中所选元素的本地状态。 ChildC10会有一个道具，这是一个在列表项的onPress上触发的功能。此函数将使用setState从父项添加/删除项。

ChildC1会有一个onPress的道具，可以对该州采取行动。

父母会是这样的

export default class Parent extends Component {

  state = {
    selectedItems: [],
  }

  render() {
    return (
      <div>
        <ChildC10
            selectedItems={this.state.selectedItems}
            onItemPressed={(item) => {
              const currentList = this.state.selectedItems;
              //Find if item already in it
              //Modify (add or remove) the element from currentList
              this.setState({selectedItems: currentList})
          }}
        />
        <ChildC1 onButtonPress={() => /*do the thing you want to do with the selectedItems. You have access to it in the state*/}/>
      </div>
    );
  }
}

您可以使用要存储selectedItems的结构。如果你想调用一个动作来进行API调用，我会在Parent中调用该动作。我不会将ChildC1绑定到Redux，因为它是一个愚蠢的组件，应该只做视觉的东西。容器（在您的情况下为Parent）是应具有逻辑的容器。

如果不是这样，请忘记最后一段，然后检查代码：P

希望它有所帮助！