0

所以...

我遇到了这个问题......

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

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

tsconfig.json

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

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

服务器.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，这里对我的策略的任何输入都会有所帮助。

索引.tsx

import * as React from 'react'

interface HelloMessageProps {
    name: string
}

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

索引.ts

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

res.render("index", options);

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

4

1 回答 1

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(...))。

于 2016-12-01T01:28:35.017 回答