Question

我有一个组件，显示一个模式，用于在我的地图中弹出一些内容。我有一个很直接的设置：

JSX看起来像这样：

  <Modal show={this.props.results.showPreviewModal} >
         {myPreviewContent}
  </Modal>

2个动作创建者，用于打开，关闭和设置当前项目：

export function previewAsset(result) {
    return {
        currentResult: result,
        type: actions.PREVIEW_ASSET
    };
}

export function closePreviewModal() {
    return {
         type: actions.CLOSE_PREVIEW_MODAL
    };
}

他们的减速器：

case actions.PREVIEW_ASSET:
      return state.set('currentPreview', action.currentResult).set('showPreviewModal', true);

case actions.CLOSE_PREVIEW_MODAL:
      return state.set('showPreviewModal', false);

现在，这似乎工作正常。但是，问题在于其中包含模态的组件位于地图内部，因为它是一个单一的搜索结果（每个结果组件都有一些功能，所以它是自己的组件，用于映射结果）。问题是，如果我有10个结果，当我点击触发previewAsset动作的按钮时，此模态会打开10次。

这是有道理的，因为所有组件都可以访问showPreviewModal，但我想知道的是，如果有一种方法可以使每个组件单独成为唯一，那么只有1模态打开，而不是全部10不确定如何在react / redux中解决这个问题，非常感谢任何建议，谢谢！

Answer 1

我成功使用的一种方法是将Modal组件拉出循环（或者在这种情况下为ICatalogsService catalogService; catalogService = new SomeConcreteCatalogService(); // not the best to "new" it up. // But that is not the real question here. var clientNameList = catalogService.getClients().Select(s=>s.Name).ToList();），并为map()或类似的东西提供一个缩减器，当它被设置为选择了一个项目（您也可以使用currentItem，然后根据currentItemIndex来电中的项目选择当前项目。

在父组件中，您将Modal作为子项，并且只有在connect()不为空时才显示它。

这是一个快速的JSBin示例，向您展示我的意思：

http://jsbin.com/fefoxoy/edit?html,js,console,output

React / redux + bootstrap，使模态显示对于组件是唯一的

1 个答案: