Как передать props из наблюдаемого mobx в наблюдаемый mobx-react?

Не могу понять mobx-react ...

Как передать реквизиты из наблюдаемого мобкса наблюдателю, реагирующему на мобкс?

Приведенный ниже код не работает, но я чувствую, что должен. Может кто-нибудь сказать мне, что не так?

let mobxData = observable({information: "this is information"});

@observer class Information extends React.Component {
    render() {
        console.log(this.props.mobxData.information);
        return (
            <h1>class: {this.props.mobxData.information}</h1>
        )
    }
};

const StatelessInformation = observer(({mobxData}) => {
    console.log(mobxData.information);
    return <h1>stateless: {mobxData.information}</h1>
});

ReactDOM.render(
    <div>
        <Information/>
        <StatelessInformation/>
    </div>,
    document.getElementById('app')
);

reactjs javascript mobx mobx-react
person joeydebreuk    schedule 17.08.2017    source источник
comment
Я не совсем понимаю, о чем вы спрашиваете. У меня работает.   -  person Tholle    schedule 17.08.2017
comment
Спасибо за создание JSBin. Я понимаю, если вы передадите их через родителя, это сработает, но разве Mobx не позаботится об этом?   -  person joeydebreuk    schedule 17.08.2017
comment
Я предполагаю, что здесь я ошибаюсь.   -  person joeydebreuk    schedule 17.08.2017
comment
Если вы хотите, чтобы mobxData были доступны без явной передачи их через родительский элемент, вы можете изучить Провайдер и внедрение. Вы также можете удалить this.props.mobxData.information и написать mobxData.information в классе и удалить деструктуризацию в версии без сохранения состояния, если вы хотите получить доступ к mobxData напрямую.   -  person Tholle    schedule 17.08.2017
comment
И если у меня есть более сложное приложение с магазином, содержащим около 10 переменных, не повредит ли вводить это в каждый компонент? Стоит ли писать разные инъекционные модели, получающие данные из магазина? Как лучше всего это сделать? Еще раз спасибо !!!   -  person joeydebreuk    schedule 17.08.2017
comment
Без проблем! Если у вас есть CarStore с 10 переменными, не проблема внедрить это в каждый компонент, которому нужна одна из этих 10 переменных. Если у вас есть CarStore и GarageStore, и вам нужны только переменные из CarStore в конкретном компоненте, конечно, нет необходимости вводить GarageStore в этот компонент.   -  person Tholle    schedule 17.08.2017
comment
Что делать, если компоненту не нужны все 10 варов? Если мне нужен только 1 вар из CareStore, мне не нужно писать отдельного поставщика и просто вводить 10 переменных? Или это испортит производительность (вы знаете ... весь рендеринг ...). Большой привет вам и всему сообществу stackoverflow, должны были спросить здесь раньше. Экономит столько времени.   -  person joeydebreuk    schedule 17.08.2017
comment
MobX выполняет повторную визуализацию только тогда, когда наблюдаемые объекты зависят от изменений , так что это вообще не проблема.   -  person Tholle    schedule 17.08.2017
comment
также не забывайте о дополнительных жизненных циклах, таких как componentWillReact и т. д.   -  person Dimitar Christoff    schedule 17.08.2017

Ответы (1)


arrow_upward
2
arrow_downward

В последнее время я не делал много mobx и не тестировал это, но обычно у вас где-то есть провайдер, а затем @inject для передачи магазинов в качестве реквизита

Потребитель информации:

import { observer, inject } from 'mobx-react'

@inject('information')
@observer
class Information extends React.Component {
  render(){
    {this.props.information.foo}
  }
}

уровень модели - очень простой

import { observable, action } from 'mobx'

class Information {
  @observable foo = 'bar'
  @action reset(){
    this.foo = 'foo'
  }
}

export new Information()

Уровень корневого провайдера

import { Provider } from 'mobx-react'
import Information from ./information'

<Provider information={Information}>
  <Information />
</Provider>

// test it... 
setTimeout(() => {
  Information.foo = 'back to foo'
}, 2000)

но в конечном итоге вы, вероятно, сможете работать с тем, что передаете в Provider

Под капотом провайдер вероятно просто передает context через childContextType и contextType, когда HOC запоминает его и сопоставляет с props.

person Dimitar Christoff    schedule 17.08.2017
comment
Ваше здоровье. Я думал, что mobx позаботится об этом. Спасибо еще раз! - person joeydebreuk; 17.08.2017