Question

我是React＆amp;的新手mobx。我用mobx创建了简单的类。

在渲染视图时，具有@observable的内容未进行getiing渲染。

注意：我没有使用create-react-app创建我的应用

我的代码：

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

        ]
    }
};

请帮我解决这个问题

Answer 1

通过将插件更改为

来解决问题

插件：[＆＃39; transform-runtime＆＃39;，＆＃39; transform-decorators-legacy＆＃39;]

感谢您的帮助：）

React Mobx没有呈现值

1 个答案: