问题标签 [react-dom-server]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 检测何时加载反应渲染的图像
我有一个用于渲染自定义图像的 React 组件。在简化的形式中，它看起来像这样：
该网页由服务器渲染，ReactDOMServer并且<img>元素（有意）已经存在于初始 HTML 文档中。但是，它们的onLoad事件处理程序不是. 我相信这是ReactDOMServer.
有时会发生的情况是，一些自定义图像，尤其是较小的图像，可以在 JavaScript 加载之前或在它开始运行之前或至少在 React 设置onLoad事件处理程序之前完成加载。因此，onLoad这些图像上的事件不会导致调用任何事件处理程序。
有没有办法确保在底层图像完成加载后始终调用在React 渲染元素onLoad中设置的事件处理程序？<img>
我最重要的限制是我想使用 React 并且服务器渲染的 HTML 页面需要包含正确设置属性的元素<img>。src
node.js - 简单的服务器/客户端路由 react-express(nodejs)
App.js 有一个链接 - 我不明白我是否需要动作创建者/减少者？如果是这样，如何将它与服务器端渲染连接起来？
基本上加载 otherComponent - 应该通过路径从 server.js 进行 API 调用并将响应注入回组件 - 反应动作在这张图片中的位置是什么？
server.js：
reactjs - React-router 多路由（React 组件）
下面是我处理每个请求的routes.js - 这是用于反应中的服务器端渲染 - 我有以下2个文件 - 我现在得到你好世界我遇到的主要问题是 - 我
在哪里处理其他路线？我在这部分感到困惑 - 我如何使用静态制作 base.js <!Doctype><head><title></head>- 但根据请求 url 使用不同的组件，如 /about 和 /other？请帮我解决这个问题——这对我来说就像一个很大的障碍——已经尝试了很多例子，但一切似乎都很复杂——
路由.js
base.js
javascript - React Express TypeError：无法读取未定义的属性“then”
我正在尝试在服务器上呈现我的反应应用程序，以防用户禁用 javascript 并获得更好的搜索结果。但是在导出和使用函数之间的某个地方，我得到了TypeError: Cannot read property 'then' of undefined错误。
这是我的一些代码
然后我将代码注入我的 server.js
我也试过了
我确实在控制台上看到了渲染的内容。请告诉我有什么问题，谢谢！
ps这里完全错误
reactjs - ReactDOM.hydrate() 会在客户端触发生命周期方法吗？
从React 16 文档中关于ReactDOM.hydrate()，
与 render() 相同，但用于水合其 HTML 内容由 ReactDOMServer 渲染的容器。React 将尝试将事件侦听器附加到现有标记。
是否还会在初始渲染期间触发客户端上的生命周期方法，
ReactDOM.hydrate()例如？componentWillMount()componentDidMount()render()水合期间会在客户端调用方法吗？ReactDOM.render()我想不是，因为那是和之间的区别ReactDOM.hydrate()？
如果render方法不会在客户端被调用，我们就不会期望componentDidMount()生命周期方法被触发。
如果客户端没有调用任何生命周期方法，我们怎么知道 React 何时完成渲染。我想callback在以下语法中：
ReactDOM.hydra（元素，容器[，回调]）
我想了解当 React “尝试将事件侦听器附加到现有标记”时是否有可用的生命周期方法/钩子（对应用程序提供更多控制）。
reactjs - 在使用 HtmlWebpackPlugin 呈现的 React 组件中导入 SCSS 时出错
我们想将我们的 React 组件之一渲染为静态 HTML，因此它位于服务器返回的 index.html 中。
而不是在服务器启动时执行此操作的代码，我们宁愿 HtmlWebpackPlugin 将 React 组件渲染到其生成的 index.html 中。这是可能的，而且效果很好；但是，一旦我们尝试使用导入其 SCSS 的 React 组件进行此操作，我们就会看到以下错误：
错误：/Users/calumjames/htmlwebpackplugin-error-react-rendering/tools/webpack/indexRenderer:5396
return window && document && document.all && !window.atob;
^
ReferenceError: 未定义窗口
我创建了一个简单的 Git 存储库来举例说明这个问题。正如README文件中提到的，如果Loading组件中导入SCSS的那行被注释掉了，这个错误就不会出现了，组件会正确渲染到index.html中。
我们可以不改变组件的编码方式，因为它是一个内部共享组件，并且编码风格与其他共享组件相匹配。
我的代码或配置有问题，还是其中一个 Webpack 插件或加载程序有问题？
reactjs - 将 ReactDOMServer 与 Sass 一起使用时出现语法错误
在我的项目中使用ReactDOMServer和时出现如下语法错误：Sass
语法错误：/Users/ceyhun23/Sites/{project_name}/lib/components/common/Menu/Menu.scss：意外字符 '#' (1:3) 0|server | > 1 | img#logo{ 0|服务器 | | ^ 0|服务器 | 2 | 高度：100%；0|服务器| 3 | }
webpack.config.js：
这是我的服务器脚本ExpressJs
Menucomponent 是组件的子组件App，Menu.scss导入如下：
最后Menu.scss：
你有什么建议吗？你能告诉我，我的来源有什么问题吗？
谢谢！
react-router - TypeError：element.type.toLowerCase 不是函数
我在为 React 应用程序设置 SSR 时遇到问题。渲染的服务器端代码如下：
路由配置如下：Routes.js
应用程序.js
它抛出以下错误：
当我尝试打印 console.log(React.createElement(Routes)); 时，它显示如下：
我已经使用 babel 从 Routes 文件创建了 CompiledRoutes 文件，并将其导入到 server.js 中，如下所示：
有人可以指导我这里可能是什么问题吗？在此先感谢。
reactjs - jsx 传递给 react-dom/server renderToString
我正在尝试了解 react-dom/server。
我有一个反应应用程序，使用 express 作为服务器。
我有一条这样的快速路线：
如果我使用 运行服务器文件node app-server，我会收到此错误：
我根据那里的示例将 JSX 传递给 renderToString： https ://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/StaticRouter.md
如何使快速服务器文件处理此 JSX 代码？
对于客户端，我使用带有 babel loader 的 webpack，它运行良好。
reactjs - 有没有办法使用 React 执行 SVG 图形的服务器端渲染？
我正在为一个项目使用 Highcharts 和 React，并且需要支持生成的 SVG 的服务器端渲染。有人可以建议一种方法，以便我得到一个带有 png/jpg 图像的静态渲染页面吗？用于查看渲染内容的浏览器不支持 svg。
谢谢。