ruby-on-rails - 如何将基于 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 是唯一的，并且您将日期作为道具传递，但为了简洁起见，我将其省略了。