Ruby on Rails嵌套表单创建：实现评论下的回复功能

看起来你已经有了模型关联的基础，接下来咱们一步步把回复功能落地到个人资料页里：

1. 确认模型关联（先把基础打牢） #

确保三个模型的关联关系配置正确，避免后续出现关联错误：

# app/models/user.rb
class User < ApplicationRecord
  has_many :reviews, dependent: :destroy
  has_many :replies, dependent: :destroy
end

# app/models/review.rb
class Review < ApplicationRecord
  belongs_to :user
  has_many :replies, dependent: :destroy
end

# app/models/reply.rb
class Reply < ApplicationRecord
  belongs_to :user
  belongs_to :review
end

2. 配置嵌套路由 #

因为回复是属于某个用户下的某条评论的，所以需要设置嵌套路由：

# config/routes.rb
resources :users do
  resources :reviews do
    resources :replies, only: [:create] # new动作可以不用，直接在视图里渲染表单
  end
end

3. 完善Profile控制器的show动作 #

假设你的Profile控制器是UsersController的show方法，需要预加载评论和回复避免N+1查询，同时初始化一个空的Reply对象用于表单：

# app/controllers/users_controller.rb
def show
  @user = User.find(params[:id])
  # 预加载评论关联的回复和评论作者，提升页面性能
  @reviews = @user.reviews.includes(:replies, :user)
  @reply = Reply.new
end

4. 个人资料页的视图实现（核心部分） #

把回复按钮、隐藏的回复表单，以及已有回复的展示整合到评论列表中：

# app/views/users/show.html.erb
<% @reviews.each do |review| %>
  <div class="mb-4 p-3 border rounded review-container">
    <!-- 展示评论内容 -->
    <p class="fw-bold"><%= review.user.name %> 评论道：</p>
    <p><%= review.content %></p>

    <!-- 展示该评论下的已有回复 -->
    <div class="mt-2 ms-4 replies-section">
      <% review.replies.each do |reply| %>
        <div class="mb-2 p-2 bg-light rounded">
          <p class="small text-muted"><%= reply.user.name %> 回复：</p>
          <p class="small"><%= reply.content %></p>
        </div>
      <% end %>
    </div>

    <!-- 回复按钮 -->
    <button class="btn btn-sm btn-outline-primary mt-2 reply-toggle-btn" data-review-id="<%= review.id %>">
      写回复
    </button>

    <!-- 回复表单（初始隐藏） -->
    <div class="mt-3 reply-form d-none" id="reply-form-<%= review.id %>">
      <%= form_with(model: @reply, url: user_review_replies_path(@user, review), local: false) do |form| %>
        <%= form.hidden_field :user_id, value: current_user.id %> <!-- 回复者是当前登录用户 -->
        <%= form.hidden_field :review_id, value: review.id %>

        <div class="mb-2">
          <%= form.text_area :content, class: "form-control", placeholder: "写下你的回复...", rows: 2 %>
        </div>

        <%= form.submit "提交回复", class: "btn btn-sm btn-primary" %>
      <% end %>
    </div>
  </div>
<% end %>

5. 用JS控制回复表单的显示/隐藏 #

添加一段简单的JavaScript，让点击"写回复"按钮时切换表单的显示状态：

// 可以放在app/javascript/controllers/reply_controller.js或者视图的script标签里
document.addEventListener('DOMContentLoaded', function() {
  const toggleBtns = document.querySelectorAll('.reply-toggle-btn');
  
  toggleBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const reviewId = this.dataset.reviewId;
      const form = document.getElementById(`reply-form-${reviewId}`);
      form.classList.toggle('d-none');
    });
  });
});

6. 实现回复的创建逻辑 #

新建RepliesController处理表单提交：

# app/controllers/replies_controller.rb
class RepliesController < ApplicationController
  before_action :authenticate_user! # 确保只有登录用户能回复

  def create
    @review = Review.find(params[:review_id])
    @reply = @review.replies.build(reply_params)
    @reply.user = current_user # 绑定回复的作者为当前登录用户

    if @reply.save
      # 用Turbo实现无刷新更新（Rails7+推荐），或者重定向回个人资料页
      redirect_to user_path(params[:user_id]), notice: '回复成功！'
    else
      # 提交失败时回到个人资料页并显示错误
      @user = User.find(params[:user_id])
      @reviews = @user.reviews.includes(:replies, :user)
      render 'users/show'
    end
  end

  private

  def reply_params
    params.require(:reply).permit(:content) # user_id和review_id已经通过隐藏字段和路由传递，不用在强参数里允许
  end
end

几个注意点 #

• 如果你用的是Bootstrap，d-none类可以直接隐藏元素；如果不用框架，自己写display: none的CSS类就行
• 记得在控制器里加上登录验证，防止未登录用户提交回复
• 可以用Turbo Stream实现回复提交后的无刷新更新，提升用户体验

内容的提问来源于stack exchange，提问作者Xia Lei