如何使用 react-rails gem 预渲染命名空间的反应组件？答案

【问题标题】：How do I prerender a namespaced react component using the react-rails gem?如何使用 react-rails gem 预渲染命名空间的反应组件？
【发布时间】：2014-12-06 08:42:38
【问题描述】：

（注意：我使用的是“therubyracer”、“react-rails”和“sprockets-coffee-react”宝石）

这是我的简单组件 (Hello.js.cjsx) 的代码：

# @cjsx React.DOM

Hello = React.createClass(
  render: ->
    <div>
      Hello {@props.name || "World"}!
    </div>
)

window.components ?= {}
window.components.Hello = Hello

在我的 Rails 视图 (index.html.erb) 中，这很好用：

<%= render_component('components.Hello', {name: 'Jack'}) %>

但是，当我尝试这个时：

<%= react_component('components.Hello', {name: 'Jill'}, {prerender: true}) %>

我收到此错误：

Encountered error "ReferenceError: components is not defined"

这看起来很奇怪，因为我在我的组件中定义它。

我做错了什么？

【问题讨论】：

就是这样。未定义的错误。什么是“？=”？
?= 是咖啡脚本的“存在”运算符。它的 javascript 等效项是： if (window.components == null) { window.components = {}; }
我应该补充一下，将该行更改为：window.components = {} 不能解决问题。

标签： javascript ruby-on-rails ruby reactjs

【解决方案1】：

问题在于，对于使用render_component 渲染的任何内容，都需要将组件注册到全局window 对象。这有点不理想，但它暂时是如何工作的。

这就是我一直在做的。不理想，但有帮助。

components /
    namespace /
       MyComponent.js.jsx

然后在我的文件中执行此操作：

# components/namespace/MyComponent.js.jsx

window.NamespaceMyComponent = React.createClass({});

module.exports = window.NamespaceMyComponent;

最后一部分允许我使用 browserify 并像这样要求我的模块：

require('components/namespace/MyComponent')

并像这样使用render_component 助手：

<%= render_component "NamespaceMyComponent", {}, {prerender: true} %>

【讨论】：

【解决方案2】：

我不确定您使用的语法。请换行：

window.components ?= {}
window.components.Hello = Hello

与

window.Hello = Hello

（您可以关注this link 以获取更多示例）。

【讨论】：

但这如何解决我希望将所有组件放在同一个对象命名空间中而不是全部全局的问题？