React中如何根据传入的字数Props实现showMore段落展开收起组件？

核心思路 #

要实现按单词数（而非字符数）截断文本，关键是先将文本拆分为独立单词的数组，再截取指定数量的单词重新拼接，同时配合状态管理实现展开/收起的切换逻辑。

具体实现（React示例） #

import { useState } from 'react';

const ShowMore = ({ wordCount, children }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  // 按单词数截断文本的工具函数
  const truncateText = (text, limit) => {
    // 按空白字符拆分单词，自动过滤连续空格
    const words = text.trim().split(/\s+/);
    // 总单词数不超过限制时直接返回原文本
    if (words.length <= limit) return text;
    // 截取指定数量单词并拼接，添加省略号
    return words.slice(0, limit).join(' ') + '...';
  };

  const displayText = isExpanded ? children : truncateText(children, wordCount);
  // 判断是否需要显示展开/收起按钮
  const hasMore = children.trim().split(/\s+/).length > wordCount;

  return (
    <div className="show-more">
      <p>{displayText}</p>
      {hasMore && (
        <button onClick={() => setIsExpanded(!isExpanded)}>
          {isExpanded ? '收起' : '展开'}
        </button>
      )}
    </div>
  );
};

// 使用示例
// <ShowMore wordCount={5}>这是一段包含多个单词的测试文本，用来验证按字数截断的功能是否正常</ShowMore>

适配中文场景的调整 #

如果需要按汉字数截断（而非英文单词），可以修改拆分逻辑：

const truncateText = (text, limit) => {
  // 将文本拆分为单个字符，过滤空字符
  const chars = [...text].filter(char => char.trim() !== '');
  if (chars.length <= limit) return text;
  return chars.slice(0, limit).join('') + '...';
};

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