0

我正在尝试将 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尚不存在，但是以下都不能访问窗口工作（或文档）：

window #is undefined

$window # is nil

Window # is undefined

似乎没有适用于 JS 等效项的蛋白石命令文档，而且我找不到任何示例工作。

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

编辑：

执行以下操作实际上有效：

我没有使用 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')`
    }
})|

但它是 suuuuper hacky。

4

1 回答 1

0

问题是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
于 2015-08-17T12:48:59.277 回答