打字稿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服務器端渲染問題

回答

相關問題