React.js的Radium内联样式意外标记错误？

Question

所以我做了一个

     npm install radium

它在我的node modules文件夹中安装了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"
  },
}

我还在我的组件文件的顶部包含了radium (我意识到我可能不需要这样做

var Radium = require('radium');

因此，基本上我遵循了radium文档，只是剪切和粘贴它们的示例。

我也在使用gulp来管理我的所有任务，下面是我的gulp文件的样子：

'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);
});

还要注意，我是如何将to作为一个要求包含在我的gulpfile中的，尽管我并没有在实际的任务中特别包含它；我需要以某种方式将它包含在任务中吗？

那么，现在来看看错误，当我把这个包含进来的时候(就像文档上说的那样)

@Radium

它不识别它，并说“意想不到的令牌”。

Answer 1

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

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