同构反应，无法呈现为字符串，因为我没有有效的反应元素？

Question

我在使用服务器端渲染设置 React 时遇到了一些严重的问题。这是我遇到的问题的相关文件：https://bitbucket.org/snippets/imattacus/g9r6

我一直在关注在线教程，我只是在做我看到其他人在做的事情 - 但我的印象是我已经制作了一个反应组件（class？）并且我需要 react.createElement() 在我制作的组件上，以便可以渲染它。

但我不明白该怎么做，因为 createElement 需要在 DOM?

中有一个位置

我只是 React 的新手，所以我可能完全误解了一些东西 - 但是你们能看到我的代码中会产生 'invariant error' unable to use renderToString on invalid ReactElement 的任何问题吗？

谢谢！

Answer 1

我认为这是因为您试图呈现整个 html 页面，其中包含 html 标签，我认为（不是 100%）是有效的。

这是我用于 React 服务器渲染的一些代码片段。（我正在使用 Koa）服务器代码

this.body = yield RENDER("index", { TEMPLATE: React.renderToString(<IndexView/>) });

标准html页面

<html>
<head>...</head>
    <body>
            <div id="app-root">{{ TEMPLATE|safe }}</div>
    </body>
    </html>

这是客户端 javascript 片段

React.render(<IndexView/>, document.getElementById('app-root'));

简而言之，不要在 JSX 中包含 html / head 标签。有一个 layout.html 或类似的排序并将 React 组件安装在 document.body 或具有给定 id

的元素上

Isomorphic React, unable to render as string because I haven't got a valid react Element?