如何将基于JavaScript或JSX的组件导入到React.rb中，以便在ruby中可以访问？

Question

使用给出的用于React-Bootstrap和react.rb的示例可以很好地工作，但我试图让一个名为React-TimeAgo的NPN组件工作，但我迷路了。

这就是我所做的：

在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

我做错了什么？感谢大家的帮助！

Answer 1

我找到了一个解决方法，但它并不是那么漂亮。希望能找到更好的解决方案！

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

当然，您需要确保跨度的id是唯一的，并且您将日期作为道具传递，但为了简洁起见，我省略了这一点。