2017-05-30 1 views
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

+0

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. –

+0

Avez-vous une erreur lors de l'empaquetage avec webpack? Avez-vous une erreur dans la console? – Tholle

+0

Problème résolu en changeant les plugins comme 'plugins: ['transform-runtime', 'transform-decorators-legacy']' –

Répondre

0

problème a été réparé en changeant les plugins comme

plugins: [ 'transform-exécution', 'transformer-décorateurs-legacy']

Merci pour l'aide: