本文介绍一种基于单词数（而非字符数）实现“显示更多/更少”功能的 react 组件开发方法，通过 split(' ') 和 slice() 精确控制可见词数，并支持状态驱动的展开收起交互。
本文介绍一种基于单词数（而非字符数）实现“显示更多/更少”功能的 react 组件开发方法，通过 split(' ') 和 slice() 精确控制可见词数，并支持状态驱动的展开收起交互。
在构建内容展示类组件时，仅按字符截断（如使用 substring 或 slice(0, n)）常导致语义断裂——例如在单词中间切断、末尾多出空格或标点孤立。更专业的做法是以单词为单位进行截取，确保每次展示都保持语言完整性与可读性。
以下是一个轻量、可复用的 ShowMore 组件实现：
import React, { useState } from 'react';
const ShowMore = ({ text, wordCount }) => {
const [expanded, setExpanded] = useState(false);
const toggleExpand = () => setExpanded(prev => !prev);
// 安全分割：处理连续空格、首尾空白及空字符串
const words = text.trim() === '' ? [] : text.trim().split(/\s+/);
const displayedWords = expanded
? words
: words.slice(0, Math.min(wordCount, words.length));
return (
<div className="show-more-container">
<p>
{displayedWords.map((word, idx) => (
<span key={idx}>{word}{idx < displayedWords.length - 1 ? ' ' : ''}</span>
))}
{!expanded && words.length > wordCount && <span>…</span>}
</p>
{words.length > wordCount && (
<button
onClick={toggleExpand}
aria-expanded={expanded}
className="show-more-toggle"
>
{expanded ? '收起' : '展开查看全部'}
</button>
)}
</div>
);
};
export default ShowMore;✅ 关键优化说明：
- 使用正则 /\s+/ 分割，兼容多个连续空格、制表符与换行符，避免因格式问题产生空单词；
- text.trim() 预处理防止首尾空白干扰词数统计；
- Math.min(wordCount, words.length) 防止 wordCount 超出实际词数导致空渲染；
- 收起状态下自动追加省略号 …，提升 UX 一致性；
- 添加 aria-expanded 属性，增强无障碍访问支持；
- 末尾空格逻辑优化：仅在非末位单词后添加空格，避免段落结尾多余空格。
在父组件中使用示例如下：
import React from 'react';
import ShowMore from './ShowMore';
function App() {
const longText = "React 是一个用于构建用户界面的 JavaScript 库。它采用声明式设计，高效且灵活，适用于单页应用开发。";
return (
<div className="app">
<h2>产品简介</h2>
<ShowMore text={longText} wordCount={12} />
</div>
);
}
export default App;⚠️ 注意事项：
- 该方案默认以空格为分词依据，不处理中英文混排中的标点粘连（如 "Hello,world" 会被视为一个词）。如需更精准分词（尤其对中文或复杂标点），建议集成 segmentit 或 jieba（服务端）等专业分词库；
- 若原文含 HTML 标签（如 ），直接渲染存在 XSS 风险，应先使用 DOMPurify 清洗或改用 dangerouslySetInnerHTML（仅限可信内容）；
- 性能方面，对超长文本（>10,000 词）建议添加防抖或虚拟滚动优化，但常规场景无需额外处理。
此组件简洁、健壮、符合 React 最佳实践，可快速集成至文档系统、卡片摘要、评论预览等各类需要可控文本折叠的业务场景。
