react状态管理之MobX

创建一个store.js文件

import { observable, action } from 'mobx' class Store{ @observable state ={ name: 'jay' } @action changeName = ()=> { this.state = { name: 'mm' } ] } const allStore = { oneStore: new Store() }

创建一个父组件 index.js

import React,{ Component } from 'react' import allStore from './store.js' import { Provider } from 'mobx-react' import Content from './content.js' class Parent entends Component{ render(){ <Provider { ...allStore } > <Content {...this.props} /> </Provider> } }

创建子组件content.js

import React,{ Component } from 'react' import { obsever, inject } from 'mobx-react' @inject ('oneStore') @observer class Content extends Component{ ` render(){ console.log(this.props) return( <div> content </div> ) } export default Content