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

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 组件拉出循环（在本例中为 map()），并为 currentItem 或类似的东西设置一个缩减器，它得到设置项目何时 selected（您也可以使用 currentItemIndex，然后 select 基于您的 connect() 调用中的当前项目）。

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

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

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

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

React/redux + bootstrap, make modal show unique for component

javascript

twitter-bootstrap

reactjs

redux