更新目标组件中的全局状态，而不重新复制共享全局状态的组件

Question

我试图通过跟踪一个全局z索引来增加组件onClick的z索引，该索引在任何时候都会增加，只要单击其中一个共享全局z索引状态的组件。这基本上是为了确保所点击的任何组件都具有最高的z-索引。

但是，我很难弄清楚如何防止所有组件更新z-索引，因为它们都是通过支持订阅的。我使用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,
    }

...in命令给每个组件自己的z索引状态，它只反映全局状态，但这只会使z索引保持在零。我尝试过一些类似的东西，但它们都没有用。我不知道我是不是走错了路，也不知道本地更新状态的最佳方式是什么，它反映了一个全局状态，但是如果能提供任何帮助，我们将不胜感激。

Answer 1

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

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-索引存储为值：

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

那么你的功能可能是这样的；

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

Answer 2

为什么不保留对状态中最后单击的组件的引用。那么减速机就会

case "COMPONENT_CLICKED":
    return {
        ...state,
        lastClikedComponent: action.clickedComponent,
    }

在每个组件中，您检查当前组件=== action.clickedComponent，然后zindex = 2147483647，否则zindex =0

currentcomponent应该是唯一的id，与您在react中使用的密钥在循环中使用的id相同。