Question

我试图通过跟踪全局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索引保持为零。我已经尝试了一些没有用的类似方法。我不确定是否要使用错误的方式，还是在本地更新反映全局状态的最佳方式是什么，但是会有所帮助。

Answer 1

您可以创建一个函数getNextZ，该函数给定一个具有所有按组件的z索引的对象，将返回下一个z索引。然后，您将使用该函数来计算下一个Z索引并更新商店。每个组件应该只知道其自己的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索引存储为值：

{ // ...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,
    }

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

currentcomponent应该是一个唯一的ID，与您在react中用于循环键入的类型相同

更新目标组件中的全局状态，而无需重新渲染共享全局状态的组件

2 个答案: