2016-04-07 1 views
0

Используя пример, приведенный для React-Bootstrap и response.rb, отлично работает, но я пытаюсь получить компонент NPN, называемый React-TimeAgo, и я потерян.Как импортировать компонент JavaScript на основе JSX в файл React.rb, чтобы он был доступен в ruby?

Это то, что я сделал:

В index.js (для Webpack импортировать его в WebPack пачку):

window.bs = require('react-bootstrap') 
window.timeago = require('react-timeago') 

В реальном component.rb у меня есть это:

class Rb < React::NativeLibrary 
    imports 'bs' 
end 

class TimeAgo < React::NativeLibrary 
    imports 'timeago' 
end 

Затем ссылки на компоненты Bootstrap работают отлично:

Rb.Button(bsStyle: :primary) <- works as expected 

Но я не удается получить что-либо из TimeAgo обертке:

TimeAgo.new(date: "Aug 29, 2014") {} <- just does nothing 
TimeAgo(date: "Aug 29, 2014") {}  <- method undefined 

Что я делаю неправильно? Вся помощь ценится!

+0

попробуйте TimeAgo :: TimeAgo (дата: «29 августа 2014») –

+0

также в консоли js попробуйте посмотреть Opal.TimeAgo и посмотреть, что там есть –

ответ

0

Я нашел обходное решение для этого, но это еще не все так красиво. Хотелось бы найти лучшее решение!

class TimeAgo < React::Component::Base 
    after_mount do 
     `React.render(React.createElement(window.timeago, 
     {date: 'apr 7, 2016'}), 
     document.getElementById('something_unique') 
     );` 
    end 

    def render 
     span(id: "something_unique") { } 
    end 
end 

Конечно, вы должны были бы обеспечить идентификатор пролета является уникальным, и вы прошли дату в качестве реквизита, но я оставил это за краткости.

+0

Работа с авторами реакции.rb теперь есть исправление PR для этого, так что это будет работать в будущих версиях gem. Я буду обновлять здесь, когда это произойдет. – BarrieH

Смежные вопросы