如何从 Child 更改 Parent 状态 - Mobx 状态树？

Question

我正在尝试使用 Mobx 状态树在 reactjs 中创建导航。

现在我有一个带有图标列表的瘦垂直导航栏。现在我想做的是向某些子菜单项添加子菜单项。单击这些按钮时，导航会从窄变宽（即展开）并显示子菜单项。一旦用户点击其中之一，导航就会返回瘦版。

我认为我需要的是一种方法，当在我的 parent 商店中单击一个图标时，标志设置为 "expand" 但我不知道如何设置它时child 被点击。

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

Answer 1

您需要导入 getParent 和（可选）hasParent 函数：

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

然后在你的操作中调用parent的操作：

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

如何从 Child 更改 Parent 状态 - Mobx 状态树？

How to Change Parent State from Child - Mobx State Tree?

javascript

reactjs

mobx

mobx-state-tree