有问题的蛋白石，并试图呈现出一个简单的react.rb模板

Question

我试图使用react.rb宝石与蛋白石，但我有麻烦，它。

下面是一个简单的hello world组件，没有什么复杂的。

class Hello_World
    include React::Component

    define_state(:message) { "Hello World!" }

    def initialize(native)
        @native = native
    end

    def component_will_mount
        puts self.message
    end


    def render
        div do
            span do
                self.message
            end
        end
    end

end

这样做：

puts React.render_to_static_markup(React.create_element(Hello_World))

得到了我所期望的，这个：

Hello World!
<div><span>Hello World!</span></div>

问题是当我试图将模板呈现给dom时。

这是：

 React.render React.create_element(Hello_World), `document.body`

只是给我：

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

因此，我认为这是因为document.body还不存在，但是没有一个可以访问窗口工作(或文档)：

window #is undefined

$window # is nil

Window # is undefined

似乎没有用于JS等价物的opal命令文档，而且我找不到任何示例。

我快要脱发了，我该怎么办？

编辑：

实际上，这样做是可行的：

我不使用jquery，所以我必须执行以下操作才能获得document.ready

document.ready = function (event) {
    document.addEventListener("DOMContentLoaded", event)
}

%x|document.ready(function(){
    #{
        React.render React.create_element(Hello_World), `document.getElementById('mount_point')`
    }
})|

但这太无聊了。

Answer 1

问题是body.getElementById('mount_point')返回的是零，这是因为脚本在dom准备好之前就已经执行了。

由于我没有使用Jquery，并且由于某些原因无法访问文档对象，所以我遇到了麻烦。最后，我能够为我创建一个方法来处理这个问题。

因此，定义如下：

def ready
    %x|document.addEventListener("DOMContentLoaded", function(){
        #{yield}
    })|
end

允许我做：

ready do
    React.render React.create_element(Hello_World), `document.getElementById('mount_point')`
end