Как внести изменения в контекст наблюдателя 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'))

Когда значение провайдера контекста изменилось, 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