Javascript 如何在ReactJS组件中使用Ruby方法？

我开始为我的Rails应用程序使用ReactJS

我很快注意到的一件事是在ReactJS组件中使用Ruby方法——通常，我每天使用的是格式化日期，缩短文本/字符串：

content = this.state.posts.map(post => {
            return(
                <li key={post.id}>
                        {post.created_at.strftime('%B')}
                        {post.message}
                    </li>
                )
            });

content=this.state.posts.map（post=>{
返回(

{post.created_位于.strftime（'%B'）}
{post.message}

)
});

这显然会引发一个错误

uncaughttypeerror:post.created_at.strftime不是一个函数

，因为我在javascript数据上应用了ruby方法（我习惯于在Rails视图中执行这些操作）

在ReactJS组件中使用/的正确方法是什么？我是否应该在控制器中预先准备来自数据库的数据格式？或者我应该研究JS函数来复制相应Ruby方法的行为吗

---

还是有第三种更好的方法呢？

有两个问题需要理解

上面的代码是JSX，它被翻译成javascript。除非你做了一些浏览器上没有Ruby的事情（但请继续阅读）

第二个问题是，像

post.id

和

post.created\u at

这样的实际方法是指服务器上存在的数据，同样，除非您采取措施解决此问题，否则您无法访问该数据

如果您想像上面那样编写代码，但使用Ruby并使其正常工作，您可以使用。然后，您可以完全用Ruby编写上述代码，这样就可以了

render do
  state.posts.each do |post|
    LI(key: post) do
     "#{post.created_at.strftime('%B')} #{post.message}"
    end
  end
end

更深入地回答您的问题是hyperloop是如何工作的：首先，它使用Opal Ruby->JS transpiler和Rails链轮将Ruby代码翻译成JS，然后再发送给客户端。这类似于ERB或Haml的工作方式

其次，Hyperloop为您提供了一个完整的DSL，让您可以用Ruby而不是JSX编写React组件代码

第三，Hyperloop使客户端和服务器之间的ActiveRecord模型保持同步。因此，在上面的代码中执行一个

状态.posts。每个
都意味着您需要从服务器获取post，当它们到达时，会触发react组件的重新加载

Hyperloop组件可以调用普通的react组件，同样react组件也可以调用Hyperloop组件，因为在引擎盖下，所有东西都变成了标准的react.js组件

顺便说一句，上面关于保持业务逻辑等分离的评论是正确的，并且在Hyperloop中使用与rails相同的机制得到支持，但这是我认为的另一个主题。
我的一般规则是尽可能多地在服务器端进行数据操作，因为它很容易演变成更复杂的业务逻辑，而且我更喜欢使用ruby而不是JS（我知道这里有偏见）。虽然，在那个特定的例子中，我可能会在React端用一个库（可能是momentJS）实现它，理由是它是一个格式更改，可以在UI上反复使用。