Rails应用中如何在主内容间随机/滚动后插入关注推荐组件？

嘿，看起来你已经搞定了推荐关注组件的核心部分，接下来就是把它无缝嵌入到内容流里对吧？我给你几个实用的方案，适配不同的插入需求：

如果想要实现“滚动到第10条内容后显示推荐”的效果，最直接的方式是在Rails渲染故事列表时，主动在固定间隔插入你的React组件。这种方式不需要额外的前端监听，用户滚动到对应位置就会自然看到。

比如在你的故事列表视图（比如app/views/stories/index.html.erb）里：

<% @stories.each_with_index do |story, index| %>
  <%= render partial: 'stories/story', locals: { story: story } %>

  <!-- 每10条故事后插入推荐组件（索引从0开始，所以用index+1取模） -->
  <% if (index + 1) % 10 == 0 %>
    <%= react_component('FollowSuggestionsContainer') %>
  <% end %>
<% end %>

要是只想插入一次（比如滚动到第10条后显示一次），可以加个变量标记避免重复：

<% suggestion_inserted = false %>
<% @stories.each_with_index do |story, index| %>
  <%= render partial: 'stories/story', locals: { story: story } %>

  <% if (index + 1) == 10 && !suggestion_inserted %>
    <%= react_component('FollowSuggestionsContainer') %>
    <% suggestion_inserted = true %>
  <% end %>
<% end %>

如果想要用户滚动到特定位置（比如接近页面底部）才加载推荐组件（懒加载），或者配合无限滚动场景动态插入，就需要结合前端滚动监听来处理。

步骤如下：

1. 在视图里预留一个占位容器：

<!-- 放在故事列表末尾或者你想要触发加载的位置 -->
<div id="follow-suggestions-placeholder" style="min-height: 180px;"></div>

2. 编写滚动监听的JS（比如放在app/javascript/packs/follow_suggestions.js）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import FollowSuggestionsContainer from '../components/FollowSuggestionsContainer';

// 监听滚动事件，判断占位符是否进入视口
const handleScroll = () => {
  const placeholder = document.getElementById('follow-suggestions-placeholder');
  if (!placeholder) return;

  const rect = placeholder.getBoundingClientRect();
  // 当占位符顶部进入窗口可视范围时渲染组件
  if (rect.top < window.innerHeight) {
    const root = ReactDOM.createRoot(placeholder);
    root.render(<FollowSuggestionsContainer />);
    // 移除监听，避免重复渲染
    window.removeEventListener('scroll', handleScroll);
  }
};

window.addEventListener('scroll', handleScroll);

// 页面加载时先检查一次，如果占位符已经在视口内，直接渲染
document.addEventListener('DOMContentLoaded', () => {
  const placeholder = document.getElementById('follow-suggestions-placeholder');
  if (placeholder && placeholder.getBoundingClientRect().top < window.innerHeight) {
    const root = ReactDOM.createRoot(placeholder);
    root.render(<FollowSuggestionsContainer />);
  }
});

如果想要让推荐组件出现在随机位置，增加内容展示的多样性，可以在控制器里生成一个随机插入位置，然后在视图里判断：

1. 在StoriesController#index里生成随机位置：

@stories = Story.all
# 随机选择5-15条之间的位置插入
@insert_position = rand(5..15)

2. 在视图里判断插入：

<% suggestion_inserted = false %>
<% @stories.each_with_index do |story, index| %>
  <%= render partial: 'stories/story', locals: { story: story } %>

  <% if (index + 1) == @insert_position && !suggestion_inserted %>
    <%= react_component('FollowSuggestionsContainer') %>
    <% suggestion_inserted = true %>
  <% end %>
<% end %>

要是你的故事列表本身就是用React组件渲染的，那直接在React逻辑里处理插入更顺畅：

const StoryList = ({ stories }) => {
  return (
    <div className="story-list">
      {stories.map((story, index) => (
        <>
          <StoryCard key={story.id} story={story} />
          {/* 每10条插入一次推荐组件 */}
          {(index + 1) % 10 === 0 && <FollowSuggestionsContainer />}
        </>
      ))}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Noor Ali Khan