服务器端组件呈现

Question

我试图在服务器上使用一个非常简单的renderToString组件：

/** @jsx dom */
var React = require("react");

var Title = React.createClass({
  render: function(){
    return(<h1>Hello World</h1>) 
  }
});

module.exports = React.createFactory(Title);

当我调用ReactDOMServer.renderToString (组件)时，我得到了Error: Invariant Violation: renderToString(): You must pass a valid ReactElement.

如果我用React.createElement (标题)代替，我会得到

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");

我不知道为什么这不管用！

Answer 1

所以我犯了几个错误。解决办法如下：

( a)在要求组件时使用babel/寄存器意味着可以在不使用任何faff的情况下动态进行转涂;)

b) dom是由Babel的@jsx语法插入的。既然使用babel/登记簿，就没有必要这样做。

c)不建议使用createFactory导出组件，因为该组件的其他用户可能希望在该组件上调用createElement。

( d)我在路由文件上调用了createFactory，但它似乎返回了一个需要调用的函数。- ReactDOMServer.renderToString(Component())