0
Je suis nouveau à React & mobx. J'ai créé une classe simple avec mobx.Réagir Mobx ne pas rendre la valeur
Lors du rendu de la vue, le contenu contenant @observable n'est pas rendu.
Note: Je n'ai pas créer mon application avec créer une réaction-app
Mon code:
import {observable, computed} from 'mobx';
import {observer} from 'mobx-react';
import React from 'react';
import {Component} from 'react'
@observer class store extends Component {
@observable count = 0;
render(){
return(
<div>
Counter : {this.count} <br/>
<button onClick={this.handleInc}>+</button>
<button onClick={this.handleDec}>-</button>
</div>
)
}
handleInc=() =>{
this.count++;
}
handleDec=() =>{
this.count--;
}
}
export default store;
Package.json:
{
"name": "new-react-app",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"example": "webpack-dev-server --progress --color --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.5.0",
"css-loader": "^0.28.1",
"style-loader": "^0.17.0",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"awesomplete": "^1.1.1",
"babel-loader": "^6.2.4",
"babel-preset-stage-1": "^6.24.1",
"d3": "^4.9.1",
"material-ui": "^0.18.1",
"material-ui-settings-panel": "^0.1.1",
"mobx-react": "^4.2.1",
"react": "^15.5.4",
"react-bootstrap": "^0.31.0",
"react-bootstrap-table": "^3.3.4",
"react-bootstrap-typeahead": "^1.3.0",
"react-dom": "^15.5.4",
"react-md": "^1.0.13",
"react-router": "^2.0.0",
"react-table": "^4.2.0",
"react-tap-event-plugin": "^2.0.1",
"react-transition-group": "^1.1.3",
"reactstrap": "^4.6.2"
},
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}
webpack.config. js:
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
],
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0', 'react'],
plugins : ["transform-class-properties","transform-decorators-legacy",'transform-runtime', "transform-decorators"]
}
}
]
}
};
S'il vous plaît aidez-moi à résoudre ce problème
Veuillez renommer 'class store' en' classe Score' car les noms de composants en minuscules sont supposés être des tags HTML par React. N'oubliez pas de modifier les instructions d'importation. –
Avez-vous une erreur lors de l'empaquetage avec webpack? Avez-vous une erreur dans la console? – Tholle
Problème résolu en changeant les plugins comme 'plugins: ['transform-runtime', 'transform-decorators-legacy']' –