TypeScript 2、React JS 和 Express 服务器端渲染问题答案

【问题标题】：TypeScript 2, React JS and Express Server-side Rendering IssueTypeScript 2、React JS 和 Express 服务器端渲染问题
【发布时间】：2017-04-14 02:35:32
【问题描述】：

所以...

我遇到了问题...

Invariant Violation：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

...关于“导出默认值”，我多次找到相同的response。希望我的问题的解决方案是关于我的 TypeScript 编译、ECMA 版本兼容性等的简单方法，但感谢任何帮助。

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

我意识到我没有指定“目标”，所以 tsc 默认为“es3”，我认为这是最好的向后兼容性。我尝试更新到“es5”，但这并没有解决我的问题。

server.ts

this.app.set("views", path.join(__dirname, "views"))
this.app.set("view engine", "js")

var engines = require('consolidate')
this.app.engine('js', engines.react)

由于我在 tsconfig.json 中为“jsx”属性指定了“react”，所以我编译的文件将是 .js，但仍将包含 React.createElement 等调用，因此我指定了我的快速视图引擎让 JS 文件使用整合项目的反应引擎。以前我使用的是express-react-views，在这里对我的策略的任何输入都会有所帮助。

index.tsx

import * as React from 'react'

interface HelloMessageProps {
    name: string
}

class HelloMessage extends React.Component<HelloMessageProps, {}> {
  render() {
    return <div>Hello {this.props.name}!</div>;
  }
}

index.ts

// ...
// routing code
// ...
let options: Object = {
    "name": "World"
};

res.render("index", options);

...非常感谢任何帮助！

【问题讨论】：

标签： node.js express reactjs typescript server-side-rendering

【解决方案1】：

发现我的问题是我实际上不想“渲染”视图文件（html、jade 等）。所以我不需要 express-react-views 也不需要合并，我可以删除我的代码...

this.app.set("views", path.join(__dirname, "views"))
this.app.set("view engine", "js")

var engines = require('consolidate')
this.app.engine('js', engines.react)

...并将我的 index.ts 文件更新为...

// ...
// routing code
// ...
let options: Object = {
    "name": "World"
};

const components = require('../../components')
const HelloMessage = React.createFactory(components.HelloMessage)

const ReactDOM = require('react-dom/server')
res.send(ReactDOM.renderToString(HelloMessage(options)));

...这里的关键是使用 ReactDOM 的 renderToString 方法执行“渲染”（即转换为最终的 HTML），并简单地将输出发送到响应 (res.send(...)) 而不是尝试渲染它（res.render(...)）。

【讨论】：