打字稿2，阵营JS和Express服务器端渲染问题

我遇到了问题...

不变违规：元素类型无效：预期的字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。

...并且我已经找到多次关于“导出默认值”的相同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”属性，我的编译后的文件将.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);

...任何帮助深表感谢！

来源

2016-11-29 Lane

发现我的问题是当我真的不想要渲染视图文件（html，jade等）时。所以，我并不需要EXPRESS-反应，意见也不巩固和我可以删除我的代码...

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（...））。

来源

2016-12-01 01:28:35 Lane

打字稿2，阵营JS和Express服务器端渲染问题

回答

相关问题