Возникли проблемы с опалом и попытался вывести простой шаблон реагировать.

Question

Я пытаюсь использовать гем реагировать с опалом, но у меня проблемы с ним.

Ниже приведен простой привет компонент мира, ничего сложного.

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

Кажется, что нет опаловой команды doc для эквивалентов 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')`
    }
})|

но это супер хакерский.

Answer 1

Проблема в том, что body.getElementById('mount_point') возвращал ноль, это было потому, что сценарий выполнялся до того, как домен был готов.

Поскольку я не использую Jquery и по какой-то причине я не смог получить доступ к объекту документа, у меня возникли проблемы. В конце концов, хотя я смог создать метод, чтобы справиться с этим для меня.

Итак, определяя это:

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

позволяет мне сделать:

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