我正在尝试在服务器上渲染一个非常简单的React组件:
/** @jsx dom */
var React = require("react");
var Title = React.createClass({
render: function(){
return(<h1>Hello World</h1>)
}
});
module.exports = React.createFactory(Title);
当我调用ReactDOMServer.renderToString(Component)时 Error: Invariant Violation: renderToString(): You must pass a valid ReactElement.
如果我改为使用React.createElement(Title),我会得到
return(dom.h1(null, "Hello World"))
^
ReferenceError: dom is not defined
路线文件:
var express = require('express'),
router = express.Router(),
React = require("react")
ReactDOMServer = require("react-dom/server");
JSX = require('node-jsx').install({
extension: '.jsx'
}),
AssessmentComponent = require("../react/components/title.react.jsx");
我不知道为什么这不起作用!
所以我犯了一些错误。解决方案如下:
a)在需要组件时使用babel / register意味着可以在没有任何麻烦的情况下即时进行转堆;)
b)dom是通过Babel的@jsx dom语法插入的。现在不需要使用babel / register了。
c)不建议使用createFactory导出组件,因为该组件的其他用户可能希望在其上调用createElement。
d)我在路由文件上调用了createFactory,但是它似乎返回了需要调用的函数。--ReactDOMServer.renderToString(Component())
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句