Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ruby-on-rails/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用react rails gem预呈现带名称空间的react组件?_Javascript_Ruby On Rails_Ruby_Reactjs - Fatal编程技术网

Javascript 如何使用react rails gem预呈现带名称空间的react组件?

Javascript 如何使用react rails gem预呈现带名称空间的react组件?,javascript,ruby-on-rails,ruby,reactjs,Javascript,Ruby On Rails,Ruby,Reactjs,(注意:我使用的是“therubyracer”、“react rails”和“Sprocket coffee react”宝石) 这是我的简单组件(Hello.js.cjsx)的代码: #@cjsx React.DOM Hello=React.createClass( 渲染:-> 你好{@props.name | |“World”}! ) window.components?={} window.components.Hello=你好 在我的rails视图(index.html.erb)中,这

(注意:我使用的是“therubyracer”、“react rails”和“Sprocket coffee react”宝石)

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

#@cjsx React.DOM
Hello=React.createClass(
渲染:->
你好{@props.name | |“World”}!
)
window.components?={}
window.components.Hello=你好
在我的rails视图(index.html.erb)中,这很好:

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

但是,当我尝试这一点时:

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

我得到这个错误:

遇到错误“ReferenceError:未定义组件”

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


我做错了什么?

我不确定您使用的语法。 请更换线路:

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


(您可以按照下面的示例进行操作)。

问题是,对于使用
render\u组件
渲染的任何对象,都需要将该组件注册到全局
窗口
对象中。这有点不理想,但只是目前的工作方式

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

components /
    namespace /
       MyComponent.js.jsx
然后在我的文件中执行此操作:

# components/namespace/MyComponent.js.jsx

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

module.exports = window.NamespaceMyComponent;
最后一部分允许我使用browserify并要求我的模块如下:

require('components/namespace/MyComponent')

使用
render_组件
辅助程序,如下所示:


就是这样。未定义的错误。什么是“=”?=是coffeescript的“存在”运算符。它的javascript等价物是:if(window.components==null){window.components={};}我应该添加这一点,将该行更改为:window.components={}并不能解决问题。但是,这如何解决我希望将所有组件放在同一对象命名空间中而不是使它们都是全局的问题呢?
components /
    namespace /
       MyComponent.js.jsx
# components/namespace/MyComponent.js.jsx

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

module.exports = window.NamespaceMyComponent;