本篇文章主要的介紹了關於react結合mobx的詳解,有興趣的同學可以在下方一起討論。下面就讓我們一起來看看本篇文章吧
1. npm install mobx mobx-react --save
2. npm install babel-plugin-transform-decorators-legacy -- save-dev
3. package.json中設定
"babel": { "presets": [ "react-app" ], "plugins": [ ["transform-decorators-legacy"] ] }
4. 建立Store.js
import {observable, action, useStrict} from 'mobx'; useStrict(true); class Store { @observable num = 1; @action plus(){ this.num ++; } @action minus(){ this.num --; } } export default Store;
5. 在index.js中加入Store
import {Provider} from 'mobx-react'; import Store from './utils/Store'; const store = new Store(); ReactDOM.render( <Provider store={store}> <Routes/> </Provider>, document.getElementById('root'));
6. 在Main.js中使用狀態(想看更多就到PHP中文網React參考手冊欄位中學習)
import {observer,inject} from 'mobx-react'; @inject("store") @observer class Main extends Component { render() { let {num} = this.props.store; return <p> <p>{num}</p> <button onClick={()=>{this.props.store.plus()}}>加1</button> <button onClick={()=>{this.props.store.minus()}}>减1</button> </p> } }
7. 實作效果
點擊「加1」之後,變成
#實作了計數器的功能。
這篇文章到這就結束了(想看更多就到PHP中文網React使用手冊欄位中學習),有問題的可以在下方留言提問。
以上是React如何結合mobx? react結合mobx詳解(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!