1

我正在尝试做一个简单的测试，但我知道我缺少一些简单的东西。

我有两个应用程序，一个托管在节点 (localhost:3000) 上，另一个托管在另一个站点 ( http://development.azure ) 上。该部分站点未在其标准 IIS 节点下运行。

在我的节点服务器应用程序中，我有以下内容

import { renderToString } from "react-dom/server"

app.get("/", (req, res) => {
    const name = 'Marvelous Peter'
    res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");
    res.write("<div id='content'>");
    res.write(renderToString(<Hello name={name} />));
    res.write("</div></body></html>");
    res.end();
});

app.listen(3000)

在我的 IIS 应用程序中，我尝试使用 xhr 加载反应组件，然后对其进行水合。

const xhr = require("xhr");

        xhr({
            method: "GET",
            uri: "http://localhost:3000",

        }, (err, resp, body) => {
            // check resp.statusCode
            ReactDOM.hydrate(body, document.getElementById("test"),  () => {

            });
        });

我在我的页面上看到了输出，但是，它不是 HTML 编码的。我呈现为文本

<!DOCTYPE html><html><head><title>My Page</title></head><body><div id='content'><div data-reactroot=""><h1>Hello, <!-- -->Marvelous Peter<!-- -->!</h1></div></div></body></html>

我尝试只返回 renderToString 值而不是 HTML 并且仍然得到相同的东西，特别是因为我在组件中有标签

import React from 'react'

const Hello = (props) => (
    <div><h1>Hello, {props.name}!</h1></div>
)

export default Hello

我知道我遗漏了一些东西，但我发现很难找到有关执行此操作的信息，希望能提供任何帮助！

提前致谢！

编辑：

根据下面的建议，我尝试创建一个简单的组件，然后对其进行水合，但我仍然得到相同的响应。

这是新组件：

import * as React from "react";
import * as ReactDOM from "react-dom";

class Hello extends React.Component {
    public load() {
        const xhr = require("xhr");
        let res = null;
        xhr({
            method: "get",
            sync: true,
            uri: "http://localhost:3000"
        }, (err, resp, body) => {
            res = body;
        });
        return res;
    }
    public render(): JSX.Element {
        const val = this.load()
        return val;
    }
}

const target: any = document.querySelector("#main");
if (target) {
    ReactDOM.hydrate(<Hello />, target);
}

我现在很困惑。它可能与 xhr 请求中的响应标头类型有关吗？

有什么建议么？

4

2 回答 2

2

JSX !== HTML 它们可能看起来相同，但本质上是不同的，不能互换使用。

<div/>在 JSX 中是 React.createElement("div");

<div></div>在 HTML 中是 document.createElement("div");

您不能使用 HTML（或 HTML 字符串）代替 React 中需要 JSX 的函数（主要是 ReactDOM.hydrate、ReactDOM.render、React.createElement("div", null, NEED JSX HERE）。

为了不将其呈现为字符串，您必须使用 React 提供的唯一 API 实现将 HTML 字符串转换为类似于 JSX 的东西...

dangerouslySetInnerHTML={{__html: YOUR STRING HERE}}

尝试这个..

ReactDOM.render(<div dangerouslySetInnerHTML={{__html: YOURSTRINGHERE}}/>, document.body)
于 2019-09-11T00:57:02.010 回答
0

它需要一个元素，而不是字符串。

ReactDOM.hydrate(
  <MyComponent />,
  document.getElementById('root')
)

获取该 HTML 响应并从中创建一个反应组件。然后在你的.hydrate方法中传递它。

于 2019-09-06T21:48:29.037 回答