javascript - React/redux + bootstrap，使模态显示对于组件来说是独一无二的

Question

我有一个显示模式的组件，用于在我的 map 中弹出一些内容。我有一个非常简单的设置:

JSX 看起来像这样:

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

2 个用于打开、关闭和设置当前项目的 Action 创建器:

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

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

还有他们的 reducer :

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

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

现在，这似乎工作正常。但是，问题是内部具有模态的组件位于 map 内部，因为它是一个单一的搜索结果(每个结果组件都有一些功能，因此它是自己的组件，与结果一起映射)。问题是，如果我有 10 个结果，当我单击触发 previewAsset 操作的按钮时，此模式会打开 10 次。

这是有道理的，因为 showPreviewModal 可以被所有组件访问，但我想知道是否有办法让每个组件单独地唯一，所以只有 1 模态打开，不是全部 10。不确定如何在 react/redux 中解决这个问题，非常感谢任何建议，谢谢!

Answer 1

我成功使用的一种方法是将 Modal 组件拉出循环(在本例中为 map())，并为 currentItem 设置一个缩减器或类似的东西，在选择一个项目时设置(您也可以使用 currentItemIndex，然后根据 connect() 调用中的项目选择当前项目)。

在父组件中，您会将 Modal 作为子组件，并且仅当 currentItem 不为 null 时才显示它。

这里有一个快速的 JSBin 示例来向您展示我的意思:

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