本文介绍一种简洁可靠的 react 实现方式：通过 split(' ') 将文本按空格拆分为单词数组，再用 slice() 截取指定数量的单词，配合状态管理实现响应式的“显示更多/更少”交互效果。
本文介绍一种简洁可靠的 react 实现方式：通过 split(' ') 将文本按空格拆分为单词数组，再用 slice() 截取指定数量的单词，配合状态管理实现响应式的“显示更多/更少”交互效果。
在构建内容型应用（如博客摘要、产品描述卡片）时，常需对长段落做智能截断——不是按字符长度（易切断单词），而是按真实词数控制初始显示量，并提供“展开全文”能力。React 中实现该功能的关键在于：将字符串精准按词分割，而非按字节或字符索引处理。
以下是一个轻量、健壮且可复用的 ShowMore 组件示例：
import React, { useState } from 'react';
const ShowMore = ({ text, wordCount }) => {
const [expanded, setExpanded] = useState(false);
const toggleExpand = () => setExpanded(prev => !prev);
// ✅ 安全分词：按空白字符分割，过滤空字符串（处理连续空格、换行等）
const words = text.trim().split(/\s+/).filter(word => word.length > 0);
// ✅ 渲染逻辑：展开时显示全部，收起时仅显示前 wordCount 个词
const displayedWords = expanded ? words : words.slice(0, wordCount);
return (
<div className="show-more-container">
<p>
{displayedWords.map((word, index) => (
<span key={index}>{word}{index < displayedWords.length - 1 ? ' ' : ''}</span>
))}
{!expanded && words.length > wordCount && <span>…</span>}
</p>
{words.length > wordCount && (
<button
className="show-more-toggle"
onClick={toggleExpand}
aria-expanded={expanded}
>
{expanded ? '收起' : '展开全文'}
</button>
)}
</div>
);
};
export default ShowMore;? 关键优化说明：
- 使用正则 /\s+/ 替代简单 ' ' 分割，可兼容多个空格、制表符、换行符；
- filter(word => word.length > 0) 清除因首尾空格或连续空白产生的空字符串，避免渲染冗余空格；
- 收起状态下末尾自动添加省略号 …，提升 UX 可读性；
- 添加 aria-expanded 属性，增强无障碍访问支持；
- 按需渲染按钮：仅当原文词数超过 wordCount 时才显示“展开”按钮，避免无效控件。
使用示例（App.js）：
import React from 'react';
import ShowMore from './ShowMore';
function App() {
const longText = "React 是一个用于构建用户界面的 JavaScript 库。它采用声明式设计，高效且灵活，可组合组件以构建复杂 UI。";
return (
<div className="app">
<h2>产品简介</h2>
<ShowMore text={longText} wordCount={8} />
</div>
);
}
export default App;⚠️ 注意事项：
- 此方案适用于纯英文或中英文混合文本（中文词间通常有空格），但不适用于无空格分隔的语言（如纯中文、日文）；若需中文分词，应引入专业库（如 jieba-browser 或服务端分词）；
- 避免在 wordCount 传入非数字或负值，建议在组件内增加 PropTypes 或运行时校验；
- 如需支持富文本（含 HTML 标签），需先剥离标签再分词，或改用 DOM 解析方式，不可直接对带标签字符串调用 split。
该组件结构清晰、零外部依赖、语义明确，可直接集成至任意 React 项目，是实现“词级可控截断”的推荐实践方案。
