问题标签 [react-dom-server]

这个问题完全不同，因为我搜索了很多类似但没有找到任何我正在创建一个反应服务器端渲染功能的项目并使用 webpack 编写es6代码和 babel 来编译jsx. 在我的快速路线中，我想将App组件转换为字符串，然后传递给静态 html 部分。当我这样做时它工作正常

但是现在当我希望 App 组件在这里时它不起作用

我正在像这样在快速服务器中导入 App 组件

我的 App.js

错误

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

我也在 Github 中检查了一些问题，但他们建议迁移到 react-0.14，因为这些问题很旧，但现在我使用的是 react 16

这是渲染方法：

这是我的应用程序组件

如果 unviersal 渲染为真，我会收到这些错误

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

第二个错误是

窗口未定义

我知道当通用渲染为真时，react 组件是从服务器端渲染的并且窗口对象不可用。但是你可以看到我没有在我的代码中使用窗口对象我仍然收到这个错误

我的 React 应用程序当前ReactDOMServer.renderToStaticMarkup用于生成 HTML 电子邮件。

我遇到的问题ReactDOMServer.renderToStaticMarkup是它将小图像（小于 12kb）从图像 src URL 转换为内联图像。这导致图像具有不希望的附件。

如何将 ReactDOMServer.renderToStaticMarkup 配置为不在（12kb）下内联小图像？

大家好，我在一个 Java Web 项目上工作，使用 react 和 jquery 来呈现动态网页。所以我想使用函数 ReactDOMServer.renderToStaticMarkup (element) 来检索与 html 元素相关的 html 节点，但我收到一个错误：

我也在网上搜索找到cdn ReactDOMServer 来纠正错误但出现其他错误。这是一个示例代码：

文件

JSX 文件

我在捕获服务器渲染错误时遇到问题，对我来说奇怪的是它到达了 catch 语句，但它仍然冒泡并崩溃并获得未捕获的异常。

这是我的功能的剥离版本：

我希望我的 catch 块返回 500 个错误的模块，但节点实例由于来自markupStream()的未捕获异常而崩溃

更新：根据要求，这是日志： https ://pastebin.com/A4vL8zcc

我想知道这是否可能，是否有人以前做过类似的事情。

我需要一种在服务器端序列化反应组件定义（基本上是反应类或函数......）并以某种方式将它们传递给客户端的方法。

我遇到的问题是由于我正在基于动态列表动态呈现一组子组件。根据请求，我咨询服务以获取 URL 列表，需要列表中的所有 js 资产（它们恰好是使用 umd 打包的组件），并且我能够动态呈现服务器端内容。

当我对内容进行水合时，问题发生在客户端。所有组件都重新渲染，但之前获取的组件从 DOM 中消失，因为组件状态为空（服务器端可用的组件，虽然已渲染，但在客户端不可用）。我当然可以在水合之前再次获取列表和组件（类似于服务器端的逻辑）。当然，这会完全破坏服务器端渲染这些组件的目的，所以我想知道是否有更好的方法来做我想做的事。必须有一种方法可以将已经可用的 React 组件定义从服务器端发送到客户端并节省一跳。

有什么想法吗？任何帮助表示赞赏

我的用例是：我有一个网站编辑器和一个可供用户使用的网页列表。此列表中的每一页都由一个缩略图表示。每次用户使用编辑器对页面进行更改时，都必须更新相应站点的缩略图以反映更改。我正在做的方式是在页面中安装一个 ThumbnailSandbox 组件，从 Redux 商店传递道具，然后使用 dom-to-png 创建屏幕截图并在列表中使用它。但我想在页面上不安装组件的情况下这样做，因为我认为这将是一个更清洁的解决方案，并且受其他交互影响的可能性更小。因此，我创建了一个CodeSanbox来说明我想要实现的目标。

我的逻辑是这样的：

因此，我将组件传递给 ReactDOM，然后使用第一步中的字符串创建一个 DOM 节点并将该节点传递给 html2canvas。但此时我得到了错误Uncaught TypeError: Cannot read property 'pageXOffset' of null。因为传递给 html2canvas 的元素的 ownerDocument 为 null 并且它没有属性：devicePixelRation、innerWidth、innerHeight、pageYOffset 和 pageXOffset。据我了解，这是因为节点元素不是 DOM 的一部分。

现在，我的问题是：

1）有没有办法使用 html2canvas 解决这个问题？

2）有没有其他方法可以在浏览器中截取 React 组件的屏幕截图，而无需在 DOM 中安装组件？

先感谢您！！

当我尝试打开我的构建项目时出现此错误

顺便说一下，该项目在开发模式下运行良好。

生成错误的第 760 行。注意变量 aa 是 require("react");

这是我的 package.json，你注意到我使用了最新版本的 React 和 React-Dom

构建生成的 index.html

https://pastebin.com/zUWitJH2

我们有一个使用样式化组件的 react 项目，其中 ThemeProvider 提供了一个所有组件都应该能够引用的主题对象。在这个项目中，我们有一个传单地图，我们正在以标记的形式向其中添加 React 组件，使用ReactDOMServer.renderToString. 当它试图访问theme组件的样式时，theme是未定义的。以正常方式添加组件，它可以正常工作。

我可以通过手动将主题对象导入地图组件并将主题对象作为属性传递给标记组件来强制它工作，但这似乎有点棘手 - 最好找出上下文的原因正在迷路。

在地图组件中：

在 NodeIcon 组件的样式中（主题包含一个具有多种命名颜色的对象）：

如果我将其添加到地图组件中：

并将这一行添加到我们添加 NodeIcon 的位置：

有用。但它是一种 hack - 它应该能够使用主题。

应该发生什么（以及在其他地方使用 NodeIcon 组件时会发生什么）：它在其中找到一种颜色theme.colors并将其应用于多边形的笔划。

确实发生的情况是页面在它尝试访问的样式中出现 js 错误而死掉theme.colors.blue1，说它无法读取，因为对象未定义。不知何故theme没有进入组件，可能是因为使用ReactDOMServer.renderToString. 知道如何在theme不对代码进行大量重组的情况下使标记组件可用（因为我们已经有了一个可行但笨拙的解决方案）？

Vue有什么办法不使用简写或冒号？这不是有效的 html，我在使用 React-Dom 实现它以在 Node.js 中进行服务器渲染时遇到问题