Question

我有Menu和MenuItem个反应成分。

他们是这样的。

        <Menu openOnClick>
          <MenuItem target="/" text="Item 1" active />
          <MenuItem target="#" text="Item 2" parent>
            <MenuItem target="/" text="Item 3" />
            <MenuItem target="/" text="Item 4" />
          </MenuItem>
        </Menu>

        <Menu>
          <MenuItem target="/" text="Item 1" active />
          <MenuItem target="#" text="Item 2" parent>
            <MenuItem target="/" text="Item 3" />
            <MenuItem target="/" text="Item 4" />
          </MenuItem>
        </Menu>

通常MenuItem悬停在鼠标悬停时会以dowpdown的形式打开，但我想提供下拉菜单的点击模式。

clickMode illustrate

所以MenuItem的状态为clickMode。如果Menu（父组件）的openOnClick属性为真（由用户提供），那么我想这样做，那么MenuItem clickMode状态应为true。

我通过Redux在MenuItem组件中实现了这一目标。

const mapStateToProps = (state) => {
    console.log(state.menuReducer.clickMode)
    return {
        clickMode:state.menuReducer.clickMode
    }
}

但是，如果有多个Menu组件，它将无法正常工作。因为redux存储更改了每个调度事件。

这是redux状态日志。

这里是Menu减速器。

export const menuReducer = (state = [], action) => {
    switch (action.type) {
        case menuConstants.CLICK_MODE:
            return {
                type: menuConstants.CLICK_MODE,
                clickMode: action.clickMode
            }
        default:
           return state;
    }
}

如何处理？

非常感谢您的帮助。

Answer 1

为此，您可以添加更多的高级抽象。我认为您的商店中有类似的东西：

    const state: State = {
      menu:[
       {
       //menuItem
       },
       {
       //menuItem
       }
        .
        .
        .
      ]
      
    }

我认为您需要这样做：

    const state: State = {
      menus: [
        {
          menu:[
             {
             //menuItem
             },
             {
             //menuItem
             }
              .
              .
              .
          ]
        }
      ...
      ]
      
    }

Answer 2

当前您正在以自己的状态存储一个布尔值，我建议为每个Menu引入一个键（无论如何，已经做出反应要求您这样做）并在处理程序中进行分配。

所以您的操作将如下所示：

const openOnClick = (id) => ({
  type: "CLICK_MODE",
  id: id
})

和减速器：

const initialState = {
  activeMenues: []
}

function reducer(state = initialState, action) {
 switch(action.type) {
   case "CLICK_MODE": return {
     ...state, 
     activeMenues: [...this.state.activeMenues, action.id]
   }
   ...
 }
}

在React-Redux中如何在不同的多个组件上共享不同的状态

2 个答案: