[英]Isomorphic React and JSX - rendering component as string on server
我试图在传递给客户端之前在服务器上呈现一个非常简单的组件,使用gulp和babelify进行转换,如下所示:
gulp.task("react-assessment", function(){
return browserify("./app/assessment/react/components/app.react.js")
.transform(babelify)
.bundle()
.pipe(source("reactBundle.js"))
.pipe(gulp.dest("./browser"))
});
该组件在客户端上工作正常:
var React = require("react");
var ReactDOM = require("react-dom");
var Title = React.createClass({
render: function(){
return <h1>Hello World</h1>
}
});
module.exports = ReactDOM.render(
<Title/>,
document.getElementById("react-assessment")
);
但是,当我需要Express.Node.js中的文件时,服务器崩溃并带有意外令牌
return <h1>Hello World</h1>
^
SyntaxError: Unexpected token <
当我使用在组件文件顶部使用/** @jsx React.DOM */
的旧方法时,没有问题。
路线:
var express = require('express'),
router = express.Router(),
ReactDOMServer = require("react-dom/server");
JSX = require('node-jsx').install({
extension: '.jsx'
}),
AssessmentComponent = require("../react/components/app.react.jsx");
我要去哪里错了?
通过使用babel / register解决。 不需要React.DOM
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.