如何使MOBX观察者上下文改变

Question

与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'))

当上下文提供商值更改时，具有@observer的Child无法更新。如何解决此问题。

Answer 1

mobx @observer不会观察到反应上下文的变化。如果您希望组件在上下文上更改，请使用默认的

<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