如何用react-juicer-feed组件限制展示的帖子数量？

可以限制，但直接设置perPage={3}不生效的原因是react-juicer-feed组件可能没有把这个参数正确传递到底层的Juicer原生库。下面是几个可行的解决方法：

方法1：通过customOptions传递配置 #

react-juicer-feed通常支持通过customOptions属性传递Juicer原生的配置项，试试把perPage放在这里：

import { Feed } from 'react-juicer-feed';

const MyFeed = () => {
  return (
    <Feed
      feedId="<feed-id>"
      customOptions={{
        perPage: 3
      }}
    />
  );
};

方法2：用CSS强制隐藏多余帖子 #

如果上面的方法还是不行，直接用CSS控制显示数量，简单粗暴有效：

/* 隐藏第4个及以后的帖子 */
.juicer-feed .juicer-item:nth-child(n+4) {
  display: none;
}

方法3：监听加载事件手动移除多余元素 #

利用Juicer的juicer:ready事件，在帖子加载完成后手动删除超出数量的元素：

import { useEffect, useRef } from 'react';
import { Feed } from 'react-juicer-feed';

const MyFeed = () => {
  const feedContainer = useRef(null);

  useEffect(() => {
    const handleFeedReady = () => {
      const postItems = feedContainer.current?.querySelectorAll('.juicer-item');
      if (postItems && postItems.length > 3) {
        // 只保留前3个，移除剩下的
        Array.from(postItems).slice(3).forEach(item => item.remove());
      }
    };

    window.addEventListener('juicer:ready', handleFeedReady);
    return () => window.removeEventListener('juicer:ready', handleFeedReady);
  }, []);

  return (
    <div ref={feedContainer}>
      <Feed feedId="<feed-id>" />
    </div>
  );
};

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