Rails and React, how to use helpers and methods? - ruby-on-rails

Question

How to use rails helpers in rails-react? For example, _post.haml partial looks like this
%ul#comments-list.comments-list{:data => { post: post.id }}
%li
.comment-main-level
.comment-avatar
= post_avatar(post)
.comment-box
.comment-head
%h6.comment-name.by-author
= link_to full_name(post.user), post.user
%span="#{post.created_at.strftime("%D:%H:%M:%S")}"
- if user_signed_in?
%i= post_options(post, current_user)
%i=votes(post, current_user, post)
.comment-content
.pop
= check_string(post.content)
= div_for(post.reviews.includes(:user)) do |review|
= render review
= render 'welcome/modal'
I try to put it into react component:
{ div, h2, a, p, input, ul, li, span, h6, img, span } = React.DOM
#Post = React.createClass
render: ->
div {},
ul
className: 'comments-list'
id: 'comments-list'
li null,
div className: 'comment-main-level',
div className: 'comment-avatar',
img
className: 'group-post-img media-object'
src: #props.user.img_url
div className: 'comment-box',
div className: 'comment-head',
h6 className: 'comment-name by-author',
a
href: #props.user.first_name
#props.user.first_name + ' ' +#props.user.last_name
span null, #props.post.created_at
How to realize this part?
- if user_signed_in?
%i= post_options(post, current_user)
%i=votes(post, current_user, post)
This is devise helper, and my own helpers, that contains links (with if else conditions.) I have no idea how to implement this in React. Can anybody tell me how to solve problems like this?

Answer 1

Pass the result of your helper methods as props to your component:
= react_component('Post', {
post: #post,
userSignedIn: user_signed_in?,
postOptions: post_options(post, current_user),
votes: votes(post, current_user, post)
})
In your component use a condition before returning the DOM:
var Post = React.createClass({
render: function() {
var postDetails;
if(this.props.userSignedIn) {
postDetails =
<div className="shown-when-logged-in">
<i>{this.props.postOptions}</i>
<i>{this.props.votes}</i>
</div>
}
return (
<div>
<div className="always-shown">
{this.props.post.content}
</div>
{postDetails}
</div>
);
}
});