Question

我正在构建一个React小部件，它包含一个父组件和两个子组件，每个子组件都有自己的存储区。

<Parent>
  <ChildA />
  <ChildB />
</Parent>

我需要子组件可重用。但是，两个子库都有一些从父库中需要的可观察/计算变量。我应该将父商店传给孩子吗？

parentStore = new ParentStore();
childStore = new ChildStore(parentStore);

我不确定这是不是最好的做法。是否意味着调用此子组件的每个其他父组件都必须保存相同的变量名称？

Answer 1

首先，有两种流行的方式在商店之间共享状态。

您已经展示过其中一个：将一个商店作为参数传递给另一个商店。

第二种方法（我认为最好）是设置＆＃34; rootStore＆＃34;这将为其他商店提供一个共同的范围：

class RootStore {
    constructor() {
        this.userStore = new UserStore(this);
        this.todoStore = new TodoStore(this);
    }
}

class UserStore {
    constructor(rootStore) {
        this.rootStore = rootStore
    }

    getTodos(user) {
        return this.rootStore.todoStore.todos.filter(todo => todo.author === user)
    }
}

class TodoStore {
    @observable todos = []

    constructor(rootStore) {
        this.rootStore = rootStore
    }
}

通过这种方式，您可以保持所有商店的链接。

另一方面，你说你的组件需要可以重复使用，如果是这样的话，你可能不应该直接将它连接到商店，为什么不使用道具传递这些数据？

具有mobx商店的可重用子组件，我应该将父商店引用给孩子吗？

1 个答案: