React와 mobx를 결합하는 방법은 무엇입니까? mobx와 결합된 반응에 대한 자세한 설명(예제 포함)

이 글에서는 mobx와 결합된 react에 대한 자세한 설명을 주로 소개합니다. 관심 있는 학생들은 아래에서 함께 토론해 보세요. 이 기사를 살펴보겠습니다

1. npm install mobx mobx-react --save

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

3.

"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를 생성합니다. 🎜🎜#

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 중국어 웹사이트

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를 결합하는 방법은 무엇입니까? mobx와 결합된 반응에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!