Question

如何在rails-react中使用rails helpers？例如，_post.haml partial看起来像这样

%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'

我尝试将其放入反应组件中：

{ 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

如何实现这一部分？

- if user_signed_in?
    %i= post_options(post, current_user)
    %i=votes(post, current_user, post)

这是设计帮助器，以及我自己的帮助器，它包含链接（if if条件。）我不知道如何在React中实现它。有谁能告诉我如何解决这样的问题？

Answer 1

将辅助方法的结果作为= react_component('Post', { post: @post, userSignedIn: user_signed_in?, postOptions: post_options(post, current_user), votes: votes(post, current_user, post) })传递给您的组件：

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

在组件中，在返回DOM之前使用条件：

{{1}}

Rails和React，如何使用帮助器和方法？

1 个答案: