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

Question

所以我做了

     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

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

Answer 1

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

您可以将装饰用作普通函数，因此如果您不想使用装饰器语法，也可以将组件包装在 Radium(Component) 中。这里的组件是构造函数或类，而不是实际的实例。 (所以不是 Radium())。