node.js - 在服务器上渲染 react-6ren

node.js - 在服务器上渲染 react

转载作者：搜寻专家更新时间：2023-10-31 22:22:45

30

4

我一直在努力弄清楚如何在服务器( Node/ express )上使用react，最后找到了一个足够简单的教程来理解发生了什么。但是现在，在设置好所有内容之后，我在 React.render 方法中遇到错误:

这是我的组件文件:

var React = require('react');
var box = React.createClass({
    render: function() {
        return (
            <div style='padding: 10px'>
                this.props.text
            </div>
        );
    }
});

React.render(<box text='testing server side'/>, document.body);
module.exports = box;

当我运行 npm start 时出现错误:

document is not defined

我该如何解决这个问题？我需要还是不需要渲染方法？

为了提供更多上下文，另一个组件需要此 box 组件:

var React = require('react');
var Box = require('../react-jsx/box.js'); //this is the box component
var Component = React.createClass({
    render: function() {
        return (
            <html>
                <head>
                    <title>
                        React Server Rendering
                    </title>
                </head>
                <body>
                    <Box text='testing'/>
                    <script src="public/bundle.js"></script>
                </body>
            </html>
        );
    }
});

module.exports = Component;

这一切都在 index.js 中使用

require('node-jsx').install();
var React = require('react');
var Component = require('../custom-modules/test-react-server-module.js');
var express = require('express');
var router = express.Router();

router.get('/react', function(req, res, next) {
  var markup = React.renderToString(Component());
  res.send(markup);
});

module.exports = router;

如果我删除渲染方法，我会在浏览器中收到此错误:

Cannot read property '__reactAutoBindMap' of undefined

我看到有人说可能是因为 jsx transformer 太旧了，但我想我有最新版本

我没有想法

最佳答案

首先，我建议更新您的 React 版本。当前版本公开了两个不同的顶级 API:React，通常用于创建组件和 ReactDOM，它公开了要在顶级使用的特定于 DOM 的方法您的应用程序。

这里有几点需要指出:

您正在尝试运行本应仅在浏览器中执行的代码。 NodeJS 中没有文档。我建议使用 webpack 打包这个组件文件并在浏览器上提供它们。
对于同构 React 应用程序，您需要有一个 client.js 文件，该文件为您尝试在 index.js< 中呈现的同一组件调用呈现函数。明白了吗？

了解 ReactDOM.render，如文档所述:

Render a ReactElement into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).

If the ReactElement was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.

请再次记住，ReactDOM.render 应该只使用几次，而且通常在应用的顶层使用一次。

话虽如此，您的 box.js 应该如下所示:

var React = require('react');
var box = React.createClass({
    render: function() {
        return (
            <div style='padding: 10px'>
                this.props.text
            </div>
        );
    }
});

module.exports = box;

为了使其正常工作，您需要创建一个主要组件 main-component-file.js:

var React = require('react');
var Box = require('../react-jsx/box.js'); //this is the box component
var Component = React.createClass({
    render: function() {
        return (
            <html>
                <head>
                    <title>
                        React Server Rendering
                    </title>
                </head>
                <body>
                    <Box text='testing'/>
                    <script src="public/bundle.js"></script>
                </body>
            </html>
        );
    }
});

module.exports = Component;

在您的 bundle.js 中，您需要确保它被调用以便主要组件尝试重新渲染:

var React = require('react');
var ReactDOM = require('react-dom');
var Component = require('main-component-file.js'); 

ReactDOM.render(<Component/>, document.body);

最后但同样重要的是:index.js，服务器文件。将 React.renderToString 更改为 ReactDOMServer.renderToString，从您的主要组件创建一个 React 元素并使用它:

var element = React.createElement(Component)
router.get('/react', function(req, res, next) {
  var markup = ReactDOMServer.renderToString(element);
  res.send(markup);
});

不要忘记在您的 index.js 中包含 npm 包 react-dom/server。

文章中使用的引用资料:

关于node.js - 在服务器上渲染 react ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34408059/

30

4

0

文章推荐： swift - 如何在 Swift 中添加两个泛型值？

文章推荐： html - 3 行垂直流体布局，流体高度

文章推荐： swift - 枚举变量的模式翻转

文章推荐： html - 我们可以在标题标签中居中对齐文本吗？

OpenGL:如何确定 3D(渲染)点是否被其前面的其他 3D(渲染)图元遮挡？
在我的 OpenGL 程序中，我按顺序执行以下操作: // Drawing filled polyhedrons // Drawing points using GL_POINTS // Displa
ruby-on-rails-3 - 渲染@object 和 locals vs 渲染 :partial
我想传递一个包含原始页面的局部变量，这个变量只包含一个带有值的符号。当我使用此代码时，它运行良好，可以在部分中访问 origin 变量: render :partial => "products",
JavaScript 渲染
为什么这个 HTML/脚本(来自“JavaScript Ninja 的 secret ”)不渲染？ http://jsfiddle.net/BCL54/
Django 渲染 anchor
我想在阅读完 View 后返回到特定的网页位置(跳转到页内 anchor )。换句话说，在 views.py 中，我想做类似的事情: context={'form':my_form} return r
WPF PathGeometry 渲染
我有一个包含单条折线的 PathGeometry，并以固定的间隔向该线添加一个新点(以绘制波形)。使用 Perforator 工具时，我可以看到每次向直线添加一个点时，WPF 都会将整个 PathGe
JavaScript 渲染 block
尝试了解如何消除或最小化网站上不同 JavaScript 库的渲染延迟。例如，如果我想加载来自许多社交网络的“即时”关注按钮，它们似乎会相互阻止渲染，并且您会收到令人不快的弹出窗口。 (func
渲染 3D 表面
我有以 xyz 点格式表示 3D 表面(即地震断层平面)的数据。我想创建这些表面的 3D 表示。我使用 rgl 和 akima 取得了一些成功，但是它无法真正处理可能会自行折叠或在同一 x,y 点具有
java - 渲染/更新线程同步
我正在用 Libgdx 编写一个小游戏。我有一个 Render[OpenGL] 线程，它不断对所有对象调用 render() 和一个更新线程不断对所有对象调用 update(double delta
R:渲染 xtable
我有一个 .Rmd 文件包含: ```{r, echo=FALSE, message=FALSE, results='asis'} library(xtable) print(xtable(group
javascript - HTML5 渲染
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
ios - 渲染 MTIImage
请不要评判我，我只是在学习 Swift。最近我安装了 MetalPetal 框架，并按照说明操作: https://github.com/MetalPetal/MetalPetal#example-
javascript - Canvas 渲染
如果您尝试渲染 Canvas 宽度和高度之外的图像，计算机是否仍会尝试渲染它并使用资源来尝试渲染它？我只是想找出在尝试渲染图像之前检查图像是否在 Canvas 内是否更好。最佳答案我相信它仍然在无
html - 渲染 Safari
我在 safari 中渲染时遇到问题。在 firefox、chrome 和 IE 上。如下图所示: input.searchbox{-webkit-border-radius:10px;-moz-b
通过远程桌面进行 Java 渲染
我正在尝试通过远程桌面在 Windows7 下运行我在 RHEL7 服务器中制作的 java 程序。服务器中的所有java程序都无法通过远程桌面呈现。如果我在服务器位置访问服务器本身，它们看起来没问
PHP - LaTeX 渲染
我正处于一个新项目的设计阶段，该项目将采用数据集并将其加载到文档中，然后围绕模板呈现文档。呈现的文件可以是 CSV 数据集、PDF 营销信函、电子邮件……很多东西。数据不会是数学方程式，我只是在寻找一
reactjs - 渲染 React 嵌套组件
有没有办法在不同的 div 下渲染 React 组件的子组件？ ... ... ... ... ...
Plotly:渲染 3D 网格椭球体时的视觉伪像
使用以下代码: import numpy as np from plotly.offline import iplot, init_notebook_mode import plotly.graph_
Meteor.js onRendered & 渲染
截至最近， meteor 的所有文档都指出 onRendered是一种在模板完成渲染时获取回调的新方法。和 rendered只是为了向后兼容。但是，这似乎对我不起作用。 onRendered永远不会
symfony2 Twig 渲染，抛出异常
所以在我的基本模板中，我有:{% render "EcsCrmBundle:Module:checkClock" %} 然后我创建了 ModuleController.php ... getDoctr
javascript - 阻止 Mathjax 渲染
我正在使用 vue-mathjax 来编译我的 vue 项目中的数学方程。它正在编译第一个括号 () 之间的文本。我想防止编译括号内的字符串。在文档中我发现，对于$符号，如果我们想逃避编译，我们需要使

首页

博学

6Ren·AI

商城

node.js - 在服务器上渲染 react