如何用React实现长尾词的展开收起功能？

本文共计2374个文字，预计阅读时间需要10分钟。

目录+前言+背景+开发+1.1+定义组件所需字段+1.2+获取截断后的文字+1.3+获取展开收起按钮+1.4+展开收起逻辑+1.5+完整代码+1.5.1+逻辑代码+1.5.2+样式代码+1.6+安装使用组件+资源+前言+近期想把“

目录

• 前言
• 背景
• 开发
• 1.1 定义组件所需字段
• 1.2 获取截断后的文字
• 1.3 获取展开收起按钮
• 1.4 展开收起逻辑
• 1.5 完整代码
• 1.5.1 逻辑代码
• 1.5.2 样式代码
• 1.6 安装使用组件
• 资源

前言

最近想把在项目中封装的一些公用组件奉献出来，毕竟独乐乐不如众乐乐，好东西就要大家分享。这次还是来聊实战，主题就是文字展开收起组件的实现过程，这个需求在前端项目中也算常见的需求了，可能你已经在项目中使用了自己或别人封装的组件，但是这次还是希望你能耐心地看看我的实现过程，毕竟多一个思路也会让你在后续的工作中游刃有余。

背景

老规矩，实战项目必有背景。