反应/reux + 引导，使组件的模态显示唯一

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

本文关键字：组件 模态 显示 唯一 reux 引导 反应      更新时间：2023-09-26

我有一个组件，它显示了在我的地图中弹出一些内容的模态。我有一个非常简单的设置：

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 个。 不确定如何在反应/reux中解决这个问题，非常感谢任何建议，谢谢！

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

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

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

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

相关文章：