渲染在服务器上反应

我一直在试图弄清楚如何在服务器上渲染反应(node/express),最后找到一个足够简单的教程来了解正在发生的事情.但现在,在设置好所有内容之后,我在React.render方法中遇到错误:

这是我的组件文件:

var React = require('react');
var box = React.createClass({
    render: function() {
        return (
            

                this.props.text
            
        );
    }
});

React.render(, document.body);
module.exports = box;

我跑的时候出错npm start:

文件没有定义

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

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

var React = require('react');
var Box = require('../react-jsx/box.js'); //this is the box component
var Component = React.createClass({
    render: function() {
        return (
            
                
                    
                
                
                    
                    
                
            
        );
    }
});

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;

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

无法读取未定义的属性'__reactAutoBindMap'

我看到有人说这可能是由于jsx变压器老了,但我想我有最新版本

我没有想法

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

这里需要指出的事情:

您正在尝试运行应该仅在浏览器上执行的代码.NodeJS中没有文档.我建议使用webpack打包这个组件文件并在浏览器上提供它们.

对于同构React应用程序,您需要有一个client.js文件,用于调用您尝试在其中呈现的同一组件的render函数index.js.得到它了？

理解ReactDOM.render,正如文档所述:

将ReactElement渲染到提供的容器中的DOM中,并返回对组件的引用(或对无状态组件返回null).

如果ReactElement先前已呈现为容器,则会对其执行更新,并仅在必要时更改DOM以反映最新的React组件.

请记住,ReactDOM.render应该只使用几次,通常只在应用程序的顶层使用,只需一次.

说完这个,你box.js应该看起来像:

var React = require('react');
var box = React.createClass({
    render: function() {
        return (
            

                this.props.text
            
        );
    }
});

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 (
            
                
                    
                
                
                    
                    
                
            
        );
    }
});

module.exports = Component;

在你的内部,bundle.js你需要确保调用它,以便主组件尝试重新渲染:

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

ReactDOM.render(, 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);
});

不要忘记react-dom/server在你的网站上加入npm包index.js.

文章中使用的参考文献:

React.createElement

ReactDOM.render()docs

ReactDOMServer文档