如何使用react-rails gem预先呈现命名空间的react组件？

Question

(注意:我使用的是'therubyracer‘、'react-rails’和‘链轮-咖啡-反应’)

这是我的简单组件(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"

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

我做错了什么？

Answer 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} %>

Answer 2

我对你使用的语法不太确定。请替换下面的行：

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

使用

window.Hello = Hello

(您可以关注this link以获取更多示例)。