如何使 mobx 观察者上下文发生变化

Question

当使用 context 和 mobx 时。组件无法更改观察者上下文。

示例（只是一个简单的演示）：

const Context = createContext({})

class Parent extends Component {
  render() {
    return (
      <Context.Provider value={this.state.value}> // when value changed
        <Child/>
      </Context.Provider>
    )
  }
}

@observer
class Child extends Component {   
  // ... some other observable properties
  render() {
    return (
      <div>
        {this.context} // here not changed
      </div>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'))

当上下文提供程序值更改时，Child 和 @observer 无法更新。如何解决这个问题。

Answer 1

Mobx @observer 不会观察 React 上下文的变化。如果您希望您的组件随上下文变化而变化，请使用默认值

<Context.Consumer>
  /* your component code here */
</Context.Consumer>

组件。

您可以在组件中混合使用 @observer 和 <Context.Consumer>。

@observer
class Child extends Component {   
  // ... some other observable properties
  render() {
    return (
      <Context.Consumer>
        {value  /* value from context */=> <div>{value}</div>}
      </Context.Consumer>
    )
  }
}

参考资料

https://reactjs.org/docs/context.html#contextconsumer

如何使 mobx 观察者上下文发生变化

How to make mobx observer context change

reactjs

mobx

mobx-react