0

反应通量车。此示例仅包含 react 的客户端代码。如何使其同构。在哪些地方需要更改以包含节点并使其在服务器端也一样运行。

4

1 回答 1

1

如果你已经在使用 NodeJS，那么它应该不会太难。

我假设您已经知道如何调用 React.renderToString 在服务器上呈现标记。所以剩下要做的就是渲染标记，该标记也显示来自商店的数据。

例如，如果您查看此商店，则商店数据在第 7 行定义

var _products = {}, _cartVisible = false;

需要做的是在调用之前_products设置一些其他数据。这是通过Flux 架构中的Actions完成的（请参阅第 15 行的操作是如何调用的）。React.renderToString

因此，在调用之前React.renderToString，您必须调用它来填充您的商店：

var FluxCartActions = require('../actions/FluxCartActions');

var sku = 123123;
var update = {
  name: 'Scotch.io Signature Lager',
  price: 4.99,
  quantity: 1,
  type: '48oz bottle'
};

FluxCartActions.addToCart(sku, update);

在哪里sku并且update可以是您想要的任何数据。

为了完整起见，您可以使用 ExpressJS 执行以下操作

// server.jsx
var React = require('react');
var FluxCartActions = require('./reactCode/actions/FluxCartActions');
var FluxCartApp = require('./reactCode/components/FluxCartApp.react');
var app = require('express')();

app.get('*', function(req, res){
  var sku = 123123;
  var update = {
    name: 'Scotch.io Signature Lager',
    price: 4.99,
    quantity: 1,
    type: '48oz bottle'
  };
  FluxCartActions.addToCart(sku, update);
  var markup = React.renderToString(<FluxCartApp />);
  res.send(markup);
});

注意这是一个.jsx文件，所以使用babel require hook在 NodeJS 中启用 JSX。

这很重要。完成标记后，您应该在下一个 http 请求之前清除您的存储，否则，存储中的先前数据将持续存在并且对其他请求可见。

你应该看看Alt，因为它们比 Facebook 的实现更容易使用 Flux 架构。它们还具有 和 等功能bootstrap，flush可帮助您填充您的商店，并在不调用操作或使任何公共访问者访问您的商店的情况下重置您的商店。Alt 的设计考虑了服务器端渲染。

于 2015-08-17T14:23:37.667 回答