2016-12-14 56 views
7

所以我创建一个应用程序与没有配置我安装mobx和mobx反应的反应从https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.htmlmobx +反应意外的标记

,但仍显示意外的标记的@ SYMB之前的误差。

我是否需要添加别的东西,或者我现在的配置是错误的?:(

的package.json

"devDependencies": { 
"react-scripts": "0.8.4", 
"babel-core": "^6.7.6", 
"babel-loader": "^6.2.4", 
"babel-preset-es2015": "^6.6.0", 
"babel-preset-react": "^6.5.0", 
"babel-preset-stage-0": "^6.5.0" 
}, 
"dependencies": { 
"autobind-decorator": "^1.3.4", 
"classnames": "^2.2.5", 
"lodash": "^4.15.0", 
"mobx": "^2.5.1", 
"mobx-react": "^3.5.5", 
"react": "^15.3.1", 
"react-dom": "^15.3.1", 
"validator": "^5.6.0" 
}, 

.babelrc

{ 
    "presets": ["es2015", "stage-0", "react"], 
    "plugins": [ 
     "transform-decorators-legacy", 
     "transform-class-properties" 
    ] 
} 

和代码

import React, { Component } from 'react'; 
import { action, observable } from 'mobx' 
import {observer} from 'mobx-react'; 


class App { 
    @observer cake = []; 
} 

export default new App(); 
+0

'@ observer'是用于你的反应的组分的装饰。如果你想要可观察的数据,你应该使用装饰器'@ observable'。 – Tholle

+0

无论我使用什么,当我使用@ symb时,它就停在那里。所以我认为mobx没有正确安装 –

+1

哦,我误解了。我认为这是因为create-react-app根本不支持装饰器('@')。我不认为MobX是这里的罪魁祸首。您可以尝试使用[** mobx-react-boilerplate **](https://github.com/mobxjs/mobx-react-boilerplate)。 – Tholle

回答

8

create-react-app不支持装饰器(@)。您可以使用eject create-react-app来自己添加它,从头开始创建您自己的环境,或者使用诸如mobx-react-boilerplate之类的东西作为您的起点。

我个人使用react-app-rewiredmobx extension取得了巨大成功。

+0

我构建了一个CRNA入门工具包,如果与nodejs 6.0一起使用可以很好地与装饰器一起使用,那么它的项目文档可以在https://wcandillon.github.io/react-native -do-documentation/docs/ – wcandillon

4

您可以使用提供的不使用装饰器的语法(herehere)。

下面是一个使用你提供的App类的代码示例:

import React, { Component } from 'react'; 
import { action, extendObservable } from 'mobx' 
import {observer} from 'mobx-react'; 


class App { 
    constructor() { 
    extendObservable(this, { 
     cake = [], 
    }); 
    } 
} 

export default new App(); 
1

您正在运行npm run eject后失踪包(如创建反应的,应用程序不支持装饰)。

运行npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

然后将以下通天配置添加到您的package.json

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

我想你应该把'transform-class-properties'添加到Babel插件数组中。 –