Heim  >  Artikel  >  Web-Frontend  >  Wie kombiniere ich React mit Mobx? Ausführliche Erklärung von React in Kombination mit Mobx (mit Beispielen)

Wie kombiniere ich React mit Mobx? Ausführliche Erklärung von React in Kombination mit Mobx (mit Beispielen)

寻∝梦
寻∝梦Original
2018-09-11 14:44:182144Durchsuche

In diesem Artikel wird hauptsächlich die detaillierte Erklärung von Reagieren in Kombination mit Mobx vorgestellt. Interessierte Schüler können es unten gemeinsam diskutieren. Schauen wir uns diesen Artikel gemeinsam an

1. npm install mobx mobx-react --save

2 🎜>

3. Konfigurieren Sie

"babel": {
"presets": [
"react-app"
],
"plugins": [ 
["transform-decorators-legacy"]       
]
}

in package.json 4. Erstellen Sie 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. Fügen Sie 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 Status in Main.js (Wenn Sie mehr wissen möchten, besuchen Sie die Spalte „React Reference Manual“ der PHP-Website, um mehr zu erfahren)

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>
}
}

7. Implementieren Sie den Effekt

Nach dem Klicken auf „1 hinzufügen“ wird

Wie kombiniere ich React mit Mobx? Ausführliche Erklärung von React in Kombination mit Mobx (mit Beispielen)

die Zählerfunktion implementiert.

Wie kombiniere ich React mit Mobx? Ausführliche Erklärung von React in Kombination mit Mobx (mit Beispielen)Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen). .

Das obige ist der detaillierte Inhalt vonWie kombiniere ich React mit Mobx? Ausführliche Erklärung von React in Kombination mit Mobx (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn