Question

我的简单网页应用有两页。（表示为服务器）

/家

/项目

测试页面是否在服务器和客户端都呈现。我将文本打印到控制台。我可以看到文字＆＃39;渲染＆＃39;在服务器和客户端的控制台中，如果我直接在浏览器中键入url localhost：3000 / item。但是，如果我通过主页中的<Link to="item">Item</Link>访问项目页面。我可以看到＆＃39;渲染＆＃39;仅在客户端但不在服务器端？所以我认为它不是在服务器端渲染。还是我误解了什么？谁能告诉我？
另一个问题是：我想使用相同的代码生成在android中运行的phonegap应用程序。如果我使用React服务器端渲染是否有问题？或者我应该使用React客户端渲染，然后调用restful来获取数据？
还有一个问题：当我在服务器中使用此代码时，它会给我一个＆＃34;意外的令牌＆lt;＆＃34;误差

React.renderToString（＆lt; Handler /＆gt;）

所以我改为

React.renderToString(React.createElement(Handler))

如何设置服务器以使其知道如何解析jsx代码？

谢谢大家

item.js

var React = require('react'),
DOM = React.DOM, div = DOM.div, button = DOM.button, ul = DOM.ul, li = DOM.li    

// This is just a simple example of a component that can be rendered on both
// the server and browser

module.exports = React.createClass({
    getInitialState: function() {
        console.log('getInitialState');      
        return {
            count: 0//this.props.initialCount
        };
    },

    _increment: function() {
      console.log('_increment');
      this.setState({ count: this.state.count + 1 });
    },

    render: function() {
        console.log('render');
        return div({onClick:this._increment}, this.state.count);                  
    }
});

server.js

app.use(function (req, res) {
  Router.run(routes, req.path, function (Handler) {    
    res.send('<!DOCTYPE html>' + React.renderToString(React.createElement(Handler)));
  });
});

browser.js

var React = require('react');
var Router = require('react-router');
var routes = require('./routes');

//var Info = require ('./pages/info.jsx');


 /*React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('main')
      );*/

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler />, document);
});

Answer 1

回答问题1.如果单击网页上的链接，则表示Web服务器已将生成的HTML转储到客户端。这意味着客户端上的hat响应将接管，因此您将看不到服务器上的输出。但是，如果您访问URL，则会访问服务器，因此会在服务器上看到控制台日志。希望这是有道理的。

使用react-router

1 个答案: