在使用蛋白石时遇到问题并尝试渲染一个简单的 react.rb 模板

Question

我正在尝试将 react.rb gem 与蛋白石一起使用，但我遇到了问题。

下面是一个简单的 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 尚不存在，但是以下 none 访问 window 作品（或文档）：

window #is undefined

$window # is nil

Window # is undefined

似乎没有用于 JS 等价物的蛋白石命令文档和 none 我可以找到的示例。

我快要拔头发了，我该怎么办？

编辑：

做以下实际工作：

我没有使用 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') 返回 nil，这是因为脚本在 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

在使用蛋白石时遇到问题并尝试渲染一个简单的 react.rb 模板

Having trouble with opal and trying to render out a simple react.rb template

ruby

reactjs

opalrb

react.rb