Question

我刚刚开始玩React，并且不理解渲染ReactElement。

这是我在Compo.jsx中的组件

(function(React) {
  var AnotherComponent = require('./another.jsx');

  module.exports = React.createClass({
    render: function() {
      return (
        <div className="container">
          <div className="page-header">
            <h1>Header</h1>
          </div>

          <AnotherComponent data={this.props.ddd} />
        </div>
      );
    }
  });

})(React);

主app.js

(function(React, _) {
  var Compo = require('Compo.jsx'),
      data = [];

  var render = function() {
    React.render(
      React.createElement(Compo, { ddd: data }), 
      //<Compo ddd={ data } />,
      document.body
    );
  };

  render();

}(React, _));

如果我的理解是正确的，那么

React.createElement(Compo, { ddd: data })

和

<Compo ddd={ data } />

应该返回相同的ReactElement，但后者给我编译错误说＆＃34; 预期标识符，而是看到＆＃39;＆lt;＆＃39; ＆＃34;。

我在这里缺少什么？

修改

我的gulp文件是

var gulp = require('gulp'),
    del = require('del'),
    run = require('gulp-run'),
    less = require('gulp-less'),
    cssmin = require('gulp-minify-css'),
    browserify = require('browserify'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    reactify = require('reactify'),
    package = require('./package.json'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

gulp.task('clean', function(cb) {
  del(['dist/**'], cb);
})

.task('server', function() {
  browserSync({
    host: process.env.IP,
    port: process.env.PORT,
    server: {
     baseDir: './'
    }
  });
})

.task('less', function() {
  return gulp.src(package.paths.less)
  .pipe(less())
  .pipe(concat(package.dest.style))
  .pipe(gulp.dest(package.dest.dist));
})
.task('less:min', function() {
  return gulp.src(package.paths.less)
  .pipe(less())
  .pipe(concat(package.dest.style))
  .pipe(cssmin())
  .pipe(gulp.dest(package.dest.dist));
})

.task('lint', function() {
  return gulp.src(package.paths.js)
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
})

.task('js', function() {
  return browserify(package.paths.app)
  .transform(reactify)
  .bundle()
  .pipe(source(package.dest.app))
  .pipe(gulp.dest(package.dest.dist));
})

.task('serve', ['clean', 'lint', 'less', 'js', 'server'], function() {
  return gulp.watch([
    package.paths.js, package.paths.jsx, package.paths.html, package.paths.less
  ], [
   'lint', 'less', 'js', browserSync.reload
  ]);
});

的package.json

{
  "name": "test",
  "version": "1",
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-run": "1.6.5",
    "gulp-less": "2.0.1",
    "gulp-concat": "2.4.3",
    "gulp-uglify": "1.0.2",
    "gulp-minify-css": "0.3.11",
    "gulp-jshint": "1.9.0",
    "browser-sync": "1.8.2",
    "browserify": "3.44.2",
    "vinyl-source-stream": "1.0.0",
    "vinyl-buffer": "1.0.0",
    "reactify": "0.17.1",
    "del": "1.1.1"
  },
  "paths": {
    "less": "assets/less/*.less",
    "js": "./app/**/*.js",
    "jsx": "./app/**/*.jsx",
    "app": "./app/app.js",
    "html": "*.html"
  },
  "dest": {
    "style": "style.css",
    "app": "app.js",
    "dist": "dist"
  }
}

Answer 1

您正尝试在纯JavaScript文件app.js中使用JSX语法。如果您想使用内联XML，您必须在JSX文件中执行此操作，否则您的环境将无法理解这一点，因为它不是核心JavaScript语言的一部分。

React.render错误

1 个答案: