组件中的 ReactJS 意外标记
Posted
技术标签:
【中文标题】组件中的 ReactJS 意外标记【英文标题】:ReactJS Unexpected Token in Component 【发布时间】:2016-08-28 08:38:52 【问题描述】:我有一个组件:
import React from 'react';
export default class LeftNavigation extends React.Component
static contextTypes =
getStore: React.PropTypes.func.isRequired
;
render()
return (
<div>
Left
</div>
)
但是当我尝试捆绑(使用 JSPM)时,我得到:
SyntaxError: file:///C:/wamp/www/rentapp/public/src/components/add-property/LeftNavigation.js: Unexpected token (5:24)
export default class LeftNavigation extends React.Component
static contextTypes =
getStore: React.PropTypes.func.isRequired
;
我该如何解决这个问题?
这是我的package.json
文件:
"private": true,
"scripts":
"prod": "gulp --production",
"dev": "gulp watch"
,
"devDependencies":
"bootstrap-sass": "^3.0.0",
"gulp": "^3.9.1",
"jspm": "^0.16.34",
"laravel-elixir": "^5.0.0"
,
"jspm":
"directories":
"baseURL": "public"
,
"dependencies":
"body-parser": "npm:body-parser@^1.15.0",
"express": "npm:express@^4.13.4",
"fluxible": "npm:fluxible@^1.1.0",
"fluxible-addons-react": "npm:fluxible-addons-react@^0.2.8",
"jsx": "github:floatdrop/plugin-jsx@^1.2.1",
"react": "npm:react@^15.0.2",
"react-dom": "npm:react-dom@^15.0.2",
"react-router": "npm:react-router@^2.4.0"
,
"devDependencies":
"babel": "npm:babel-core@^6.8.0",
"babel-runtime": "npm:babel-runtime@^5.8.24",
"core-js": "npm:core-js@^1.1.4"
,
"dependencies":
"babel": "^6.5.2",
"body-parser": "^1.15.0",
"express": "^4.13.4",
"fluxible": "^1.1.0",
"react": "^15.0.2"
,
"name": "rentapp",
"description": "[![Build Status](https://travis-ci.org/laravel/framework.svg)](https://travis-ci.org/laravel/framework) [![Total Downloads](https://poser.pugx.org/laravel/framework/d/total.svg)](https://packagist.org/packages/laravel/framework) [![Latest Stable Version](https://poser.pugx.org/laravel/framework/v/stable.svg)](https://packagist.org/packages/laravel/framework) [![Latest Unstable Version](https://poser.pugx.org/laravel/framework/v/unstable.svg)](https://packagist.org/packages/laravel/framework) [![License](https://poser.pugx.org/laravel/framework/license.svg)](https://packagist.org/packages/laravel/framework)",
"version": "1.0.0",
"main": "gulpfile.js",
"directories":
"test": "tests"
,
"keywords": [],
"author": "",
"license": "ISC",
【问题讨论】:
你在用 babel 转译吗?看起来你可能只需要使用var contextTypes = ...
您粘贴的代码丢失了;
是的,但是自从我开始尝试创建一个需要 babel 的节点服务器(我现在已经放弃了)我开始得到这个错误。
【参考方案1】:
将我的 config.js 的第一位更改为以下解决了该问题,不知道为什么:
System.config(
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions:
"optional": [
"runtime",
"optimisation.modules.system"
],
"blacklist": [],
"stage": 0
,
...
【讨论】:
【参考方案2】: 你使用的是 6.3.17 以上的 babel 版本吗? 您是否将 transform-class-properties 作为 babel-plugin 包含在内? 最后但同样重要的是,尝试在 babel 配置中至少使用 stage-1。【讨论】:
以上是关于组件中的 ReactJS 意外标记的主要内容,如果未能解决你的问题,请参考以下文章