React - 服务器端组件渲染

Question

我正在尝试在服务器上渲染一个非常简单的 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（组件）时，我得到 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/register 意味着转译可以在没有任何错误的情况下即时完成 ;)

b) dom 被 Babel 的 @jsx dom 语法插入。既然 babel/register 正在使用，就不需要了。

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

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

React - 服务器端组件渲染

React - server side component rendering

node.js

reactjs

react-jsx

isomorphic-javascript