如何从Child - Mobx State Tree改变父状态?

时间:2018-06-04 22:32:10

标签: javascript reactjs mobx mobx-state-tree

我正在尝试使用Mobx State Tree在反应中创建一个Nav。

现在,我有一个瘦的垂直导航栏,上面有一个图标列表。现在我想要做的是将子菜单项添加到某些菜单项。当点击这些时,导航从skinny变为宽(即扩展),并显示子菜单项。一旦用户点击其中一个,导航就会回到瘦版。

我认为我需要的是一种方式,当我在父商店中点击一个图标时,一个标志被设置为说“展开”但我不知道如何在点击一个孩子时设置它。

import { types } from "mobx-state-tree";
import NavItem from "./NavItem.js";
const NavStore = types
  .model("NavStore", {
    expanded: false,
    nav_items: types.array(NavItem)
  })
  .actions(self => ({}))
  .views(self => ({}))
  .create({

  });

export default NavStore;


import { types } from "mobx-state-tree";

const NavItem = types
  .model("NavItem", {
     expands: false,
     title: types.string
  })
  .actions(self => ({
    itemClicked() {

    }
  }))
  .views(self => ({}));

export default NavItem

1 个答案:

答案 0 :(得分:2)

您需要导入getParent和(optionaly)hasParent函数:

import { types, getParent, hasParent } from ‘mobx-state-tree’

然后在你的行动中呼叫父母的行动:

if (hasParent(self)) {
  getParent(self).someAction(someParams);
}