javascript - 我可以在进行服务器端渲染时向客户端发送 React 组件吗？

Question

我有一个在 Node/Express 服务器上构建的 Reactjs 应用程序。我正在通过以下方式进行服务器端渲染:

路由.js

var Group = require('./react/component/groups');
var props = {foo: 'bar'};
var groupHtml = React.renderToString(Group(props));
  res.render('index.ejs', {
    reactOutput: groupHtml,
    jsonProps: JSON.stringify(props),
    start: 'lessonlist'
  });

索引.ejs

<div id="react-main-mount"><%- reactOutput %></div>

<script id="props" type="application/json"><%- jsonProps %></script>
<script src="/js/<%= start %>.js"></script>

这个效果真的很棒!但这是我的问题:我的页面/组件之一将有一个子组件。但这个子组件可以是 50 多个不同组件之一。

我假设我可以要求每一个组件，即使只使用一个组件。这似乎是一个坏主意，因为我的 main.js 文件会很大。

我尝试通过 prop 和 JSON.stringify 发送它。这适用于渲染为 HTML 的服务器，但不适用于客户端，因为 JSON.stringify 无法对 React 组件进行字符串化。

我虽然可以执行 API 调用并返回它，但问题与上面相同。

有什么方法可以动态地要求某些东西，比如基于像 require('components/' + this.props.foo) 这样的变量在我已经浏览器化/重新激活之后？

任何建议/答案将不胜感激

Answer 1

Browserify 对我来说总是太大了，所以我做了研究并发现 RequireJS 。它允许我在客户端上请求其他文件，就像 Node 的做法一样。

开始使用 Require 对我来说很困难，但是一旦我开始使用它，一切就显得更容易了。看这个example我用 CoffeeScript 编写。

请记住在每个同构组件的顶部都有以下代码，这样您就不会偶然发现 Node 不理解关键字 define 所遇到的问题。

if typeof define != 'function'
  define = require('amdefine')(module)

define (require) ->

以上代码是用coffeescript编写的。

如果需要更多信息，请告诉我。