问题标签 [react-dom-server]

我试图了解React 16.8.6之间ReactDOMServer.renderToString()的区别。ReactDOMServer.renderToStaticMarkup()

这是我的理解：

• renderToStaticMarkup()当您只想呈现标记并且不想在客户端对其进行水合时，在服务器端使用。( https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup )

• renderToString()当您想使用该ReactDOM.hydrate()功能在客户端对应用程序进行水合时，在服务器端使用。( https://reactjs.org/docs/react-dom-server.html#rendertostring )

所以，如果我是对的，这两种方法之间的唯一区别是renderToString()添加了data-reactroot应用程序的主要元素。renderToStaticMarkup()React 在文档中强化了这一点：

与 renderToString 类似，但它不会创建 React 内部使用的额外 DOM 属性，例如data-reactroot。如果您想将 React 用作​​简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省一些字节。

如果您打算在客户端使用 React 来使标记交互，请不要使用此方法。相反，在服务器上 使用renderToString ，在客户端使用ReactDOM.hydrate()。

但是，我在 React 的存储库上阅读了这个问题，Dan Abramov 说：

相反，使用hydrate()明确告诉 React 水合现有的 HTML。那么它不会取决于 data-reactroot 是否存在。

和：

...建议的迁移路径是使用ReactDOM.hydrate()完全 回避问题，因为它不依赖于 data-reactroot 属性。

所以，我的问题是：data-reactroot 是否与 React 中的 hydrate 函数相关，或者文档是否错误？

了解这一点对于修复我在补水时遇到的错误非常有帮助。

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

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

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

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

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

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

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

提前致谢！

编辑：

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

这是新组件：

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

有什么建议么？

我有以下钩子，用于在整个应用程序中构建响应式组件。

我正在研究实现服务器端渲染。

使用WindowWidth.js

应用程序.js

ReactDOMServer

当 ReactDOMServer 遇到这样的事情时，它的行为是什么？这种情况的解决方法是什么？

我正在尝试使用同构服务器端渲染反应构建一个项目。由于某种原因，添加路由后项目停止启动。浏览器抛出以下错误：

错误：不变量失败：浏览器历史记录需要 DOM

也许有人可以告诉我那里出了什么问题。

这是 server.js 代码：

App.jsx 代码：

有很多代码和文件可以把它全部带到这里，但我把它放在 Github 存储库中。感谢有人可以提供帮助！

这是存储库的链接： isomorphic-react

已编辑：我更正了注入代码的方式，它与 MDX 无关，它只是普通的 html

我有html插入到我的 React 页面的代码

之前，我添加了一些组件到myContent一个 simpleregex.replace()中，我用一个转换为纯 html 的 React 组件替换了一些纯文本

*<Input>是一个样式化的组件，它返回一个<input>元素

但是，我无法访问inputRef，也无法访问任何onClick或onChange作品

我确实认为要启用这些事件侦听器，我应该hydrate使用组件吗？真的不知道它在这里如何应用，也不知道是否hydrate应该在这个用户案例中应用（不涉及服务器）

所以目标是我可以在<input>更改时进行交互，但到目前为止它绝对是我无法访问的静态 html

我能做什么？

最后，我添加了一个<input id="blah"...并使用 vanilla JavaScript 访问它，没有任何明显的麻烦

我正在尝试使用ReactDOMServer.renderToString渲染嵌入推文，但它不起作用。我正在使用react-twitter-embed npm 包。

我还尝试了另一个可以工作的 jsx 函数。但是推文嵌入不起作用。我的代码和演示在下面；

Codesandbox 演示

不工作。

作品

完整代码

我正在尝试应用此正则表达式

但它不能识别其中的$1那个href={$1}（说它没有定义），而它确实出现在第二位并且它表明它被正确捕获

我该怎么写？

*所以问题不在于正则表达式，而在于如何使用捕获的变量作为组件的参数

也许是这样的？

JavaScript 函数调用在由 innerHTML 添加到 DOM 的表下拉列表中不起作用

打开下拉菜单后：

单击它们后没有响应或错误。我尝试更改所有内容，例如 onClick 属性并将ul和li更改为选择和选项标签。似乎没有什么对我有用。

两个功能：

在官方文档中，它说，React will attempt to attach event listeners to the existing markup.
所以我认为如果我使用 ReactDOM.hydrate，它只会添加事件。

但是，当水合物工作时，它会删除由 SSR 创建的 DOM，并将其替换为由 CSR（反应脚本）创建的 DOM

为什么会这样？

我目前正在做一个新项目，所以我决定实现 React，但使用服务器端渲染。我使用express作为页面之间的路由器，所以当你访问主页时，入口点是这样的：

因此，当您访问主页时，这将获取所有用户，然后它将呈现组件，为了呈现组件，我执行以下操作：

fetchUsers 方法使用 api 响应设置res.locals.users 。我的 renderView 做这样的事情：

};

我的 LayoutWrapper 是一个替换 html 模板的 React 组件：

设置 window.INITAL_STATE = props; 的脚本 用于客户端获取获取的道具。但问题在于renderToString处理组件的方式。console.log 输出如下：

有没有办法做到这一点，而不必将 html 模板声明为简单的字符串，而是有一个设置 html 代码结构的 Wrapper 组件？