时间戳

首页 > 解决方案 > 更新目标组件中的全局状态，而不重新渲染共享全局状态的组件

javascript - 更新目标组件中的全局状态，而不重新渲染共享全局状态的组件

问题描述

我试图通过跟踪全局 z-index 来增加组件 onClick 的 z-index，只要单击共享全局 z-index 状态的组件之一，它就会增加。这本质上是为了确保单击的任何组件都具有最高的 z-index。

但是，我无法弄清楚如何防止所有组件更新 z-index，因为它们都通过 props 订阅了此状态。我将 Redux 和 mapStateToProps 与 mapDispatchToProps 一起用于点击处理程序。

我试过这样的减速器：

case "INC_Z_COMP1":
    return {
        ...state,
        zGlobal: ++state.zIndex.global,
        zComponent1: state.zIndex.global,
    }
case "INC_Z_COMP2":
    return {
        ...state,
        zGlobal: ++state.zIndex.global,
        zComponent2: state.zIndex.global,
    }

...为了给每个组件自己的 z 索引状态，它只是反映全局状态，但这只是保持 z 索引为零。我尝试了一些类似的东西，但没有奏效。我不确定我是否以错误的方式进行此操作，或者是本地更新反映全局状态的状态的最佳方式，但我们将不胜感激。

标签： javascriptreactjsredux

解决方案

您可以创建一个函数getNextZ，给定具有所有每个组件 z-index 的对象，返回下一个 z-index。然后，您将使用该函数来计算下一个 z-index 并更新存储。每个组件应该只知道自己的 z-index。

case "INC_Z_COMP1":
return {
    ...state,
    zIndexes: { ...state.zIndexes, Component1: getNextZ (state.zIndexes) },
}

case "INC_Z_COMP2":
return {
    ...state,
    zIndexes: { ...state.zIndexes, Component2: getNextZ (state.zIndexes) },
}

如果您直接将 z-indexes 存储为值：

{ // ...state
  zIndexes: {
    Component1: 1,
    Component2: 2,
    Component3: 7,
  }
}

那么你的函数可能看起来像这样；

const getNextZ = zIndexes => Math.max (...Object.values (zIndexes)) + 1;

推荐阅读