5

Webpack を使用して同形のサーバー側レンダリング React アプリをセットアップしようとしていますが、renderToString を使用して React コードを文字列に変換しようとすると、次のエラーが発生します。

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

renderToString 関数を使用して行をコメントアウトすると、このエラーが発生しなくなります (もちろん、アプリはまだ機能しません。エラー メッセージは表示されなくなりました)。

ファクトリを作成する代わりにrenderToString を渡そうとしまし<RootApp />たが、どちらも機能しませんでした。React.createElement(RoutingContextを使用React.createElementすると同じエラーが発生し、使用<RootApp />するとunexpected token < error.

そして、何が起こっているのかについてのアイデアはありますか?

私のアプリは次のようになります。

app.js

"use strict"

require("babel-register");
const Express = require('express');
const BodyParser = require('body-parser');
const Path = require('path');
const Fs = require('fs');
const Url = require('url');
const ReactRouter = require('react-router');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = Express();
app.set('view engine', 'ejs');

app.get('*', (req, res) => {
  let RootApp = require('./components/app.jsx');
  let rootAppFactory = React.createFactory(RootApp);
  let reactHtml = ReactDOMServer.renderToString(rootAppFactory({}));
  res.render('index', {reactOutput: reactHtml});
})

if (process.env.NODE_ENV !== 'test') {
  let port = process.env.port || 4000;
  app.listen(port);
  console.log('Listening on port', port);
} else {
  module.exports = app;
}

app.jsx

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class App extends Component {

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }

}

export default App;

index.ejs

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Vjeverica</title>

  </head>

  <body>
    <div id="root">
      <%- reactOutput %>
    </div>
    <script src="bundle.js"></script>

  </body>
</html>
4

1 に答える 1

7

これが機能するようになりました。問題は、app.js で app.jsx を要求する方法にありました。require代わりに を使用しているため、デフォルトのエクスポートを取得するimportために変更require('./components/app.jsx')する必要がありました。require('./components/app.jsx').default

于 2016-06-07T02:18:32.083 に答える