React と mobx を組み合わせるにはどうすればよいですか? mobxと組み合わせたreactの詳細な説明（例付き）

この記事では主に react と mobx を組み合わせた詳細な説明を紹介します。興味のある学生は以下で一緒に議論できます。この記事を一緒に見てみましょう

1. npm install mobx mobx-react --save

2. npm install babel-plugin-transform-decorators-legacy --save-dev

3. 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(&#39;root&#39;));

6. Main.js でステータスを使用します (詳細については、PHP 中国語 Web サイトを参照してください)。マニュアル

の欄）

<a href="https://www.php.cn/course/65.html" target="_blank">import {observer,inject} from &#39;mobx-react&#39;;
@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>
}
}</a>

7. 効果を実現するには

「Add 1」をクリックすると、カウンター機能が実装されます

。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

React ユーザー マニュアル

の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がReact と mobx を組み合わせるにはどうすればよいですか? mobxと組み合わせたreactの詳細な説明（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。