Question

我正在使用ReactJs，我正在使用React Js和React-templates，我遵循了proyect文档中的基本指南，但是我得到了一个我不知道如何解决的错误

Codepen！ http://codepen.io/anon/pen/bVKEqj

我正在使用gulp，browserify。
使用“gulp-react-templates”将反应模板编译成js，“commonjs”模式

这是错误 Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

这是我的代码

app.jsx

var React = require('react/addons');
// I supouse instance my "title" template 
var Title = require('./templates/title.rt.js');

var App = React.createClass({
    render:function(){
        // It should be use the template -_-
        return Title

        // i tried it and works, i copied the content of "title.rt.js"
        // return React.createElement('h1', {}, '\n\tHola esto es react template\n');
        // this works too
        // return (React.createElement('h1', {}, '\n\tHola esto es react template\n'));
    }
});
var element = React.createElement(App, {});
React.render(element, document.querySelector('.container'));

title.rt.js＆lt;使用“gulp-react-templates”“commonjs”

在js中编译的title.rt模板

'use strict';
 var React = require('react/addons');
 var _ = require('lodash');
module.exports = function () {
    return React.createElement('h1', {}, '\n\tHola esto es react template\n');
};

Gulp for React Template

gulp.task('rt', function() {
                gulp.src('./src/rt/**/*.rt')
                    .pipe(rt({modules: 'commonjs'}))
                    .pipe(gulp.dest('./src/jsx/templates'));
            });

Gsp为Jsx

        function build(file){
            if (file) {
                gutil.log("Recompiling: "+file);
            }
            return bundler
                .bundle()
                .on('error', gutil.log.bind(gutil,'Browserify Error'))
                .pipe(source('main.js'))
                .pipe(gulp.dest('./dist/assets/js'));
        }
        var bundler = watchify(browserify({
            entries:['./src/jsx/app.jsx'],
            extensions:['.jsx'],
            debug:true,
            cache:{},
            packageCache:{},
            fullPaths:true
        }));
        bundler.on('update',build);

        gulp.task('jsx', function(){
            build();
        })

感谢您的帮助

＃

解决方案

   var App = React.createClass({
      render: Title
   });

Daaaan，我的时间太长了。

添加React模板以反应js错误

0 个答案: