Rails and React, how to use helpers and methods?

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>
        );
    }
});