0

それで...

私は問題に直面しています...

不変違反: 要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、オブジェクトを取得しました。

...そして、「エクスポートのデフォルト」に関して同じ応答を複数回見つけました。私の問題の解決策が、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);

...どんな助けでも大歓迎です!

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 に答える