javascript - Radium for React.js内联样式意外的 token 错误？

所以我做了一个

     npm install radium

并且它在我的节点模块文件夹中安装了镭（我可以在那看到它）

这也是我的json包，其中包括其他安装（也许Radium与其他内容冲突？）
这是我的json包：

   {
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "babel-preset-es2015": "~6.3.13",
    "babel-preset-react": "~6.3.13",
    "babelify": "~7.2.0",
    "browserify": "~13.0.0",
    "es6-promise": "~3.0.2",
    "fs": "0.0.2",
    "gulp": "^3.9.0",
    "gulp-browserify": "~0.5.1",
    "gulp-concat": "^2.6.0",
    "gulp-load-plugins": "^1.2.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-postcss": "^6.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.1",
    "gulp-uglify": "^1.5.1",
    "node-sass": "~3.4.2",
    "radium": "^0.18.1",
    "vinyl-source-stream": "~1.1.0",
    "yargs": "^3.27.0"
  },
}

我还在组件文件的顶部包含了镭（我知道我可能不需要这样做

var Radium = require('radium');

因此，基本上我遵循的是镭文件，只是剪切并粘贴其示例。

我还使用gulp管理所有任务，这是gulpfile的外观：

'use strict';
require('es6-promise').polyfill();

// Load required files that aren't auto-loaded by
// gulp-load-plugins (see below)
var argv            = require('yargs').argv,
    fs              = require('fs'),
    gulp            = require('gulp'),
    merge           = require('merge-stream'),
    minifyCss       = require('gulp-minify-css'),
    react           = require('react'),
    radium          = require('radium'),
    path            = require('path');

// Browserify specific
var babelify = require('babelify'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream');

// This will load any gulp plugins automatically that
// have this format ('gulp-pluginName' [can only have one dash])
// The plugin can used as $.pluginName
var $ = require('gulp-load-plugins')();

// Paths
var javascriptsPath     = 'static_dev/javascripts',
    sassPath            = 'static_dev/scss';

// Get Folder Function (from paths)
function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}


// Javascript task
// If coding in Javascript, this will concat, jshint, and uglify
// Copies files to the static javascript directory
gulp.task('scripts-javascript', function() {
    var folders = getFolders(javascriptsPath);
    var tasks   = folders.map(function(folder) {
        return gulp.src(
        [
            'static_dev/javascripts/' + folder + '/caosblog.js',
        ], { base: 'static_dev/javascripts/' + folder })
            // concat files
            .pipe($.concat(folder + '.js'))
            // Check integrity
            .pipe($.jshint())
            // Remove whitespace and uglify
            .pipe($.uglify())
            // Rename the file
            .pipe($.rename(folder + '.min.js'))
            // Copy it to static folder
            .pipe(gulp.dest('static/javascripts'))
    });

    return merge(tasks);
});

// Browserify task
gulp.task('scripts-browserify', function() {
    var folders = getFolders(javascriptsPath);

    var tasks = folders.map(function(folder) {
        return browserify({
            entries: ['./static_dev/javascripts/' + folder + '/caosblog.js'],
            debug: true
        })
            .transform(babelify,  { presets: ['es2015', 'react'] })
            .bundle()
                .pipe(source(folder + '.js'))
                //.pipe($.uglify())
                .pipe($.rename(folder + '.min.js'))
                .pipe(gulp.dest('./static/javascripts/'));
    });

    return merge(tasks);
});

同样，请注意，在我的gulpfile中也将镭作为一种要求包括在内，尽管我并未在实际任务中明确包括镭。我是否需要以某种方式将其包含在任务中？

因此，现在针对错误，当我包含此错误时（如文档所说）

@Radium

它无法识别并显示“意外令牌”。

最佳答案

@Radium是一个装饰器，因此您需要https://babeljs.io/docs/plugins/syntax-decorators/插件才能使用它们。我检查了Babel的两个预设，似乎其中没有一个包含装饰器插件。

您可以将装饰用作常规功能，因此，如果您不想使用装饰器语法，也可以将组件包装在Radium（Component）中。这里的组件是构造函数或类，而不是实际的实例。 （因此不是Radium（））。