我想不通mobx react ...

如何将 Prop 从可观察的Mobx传递给 react 有Mobx的观察者?

下面的代码不起作用,但我认为应该这样做。有人可以告诉我出什么事了吗?

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

最佳答案

我最近没有做太多的事,也没有测试过,但是通常您会在某个地方有一个提供者,然后使用@inject将商店作为 Prop 传递

信息使用者:

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)

但最终您可能可以与提供商中传递的所有内容一起使用

在后台,提供者是,很可能是,只是在HOC记住它并通过映射到context时才通过childContextTypecontextType传递props

关于javascript - 如何将 Prop 从可观测的Mobx传递到可观测的Mobx?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45736116/

10-11 20:31